Ajax Loader
×

Audio Player with jQuery, MVC & OOP

Example of Model View Controller Pattern in JS with JavaScript. JS AudioPlayer using HTML5 media API.

HTML 
<!doctype html>
1
<!doctype html>
2
<html>
3
<head>
4
  <title>AudioPlayer</title>
5
  <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.1.js"></script>
6
</head>
7
<body>
8
  <form id="audioPlayer">
9
    <div>
10
      <button id="back" type="button">&lt;&lt;</button>
11
      <button id="stop" type="button">Stop</button>
12
      <button id="pause" type="button">Pause</button>
13
      <button id="play" type="button">Play</button>
14
      <button id="forward" type="button">&gt;&gt;</button>
15
    </div>
16
    <div>
17
      <button id="volumeUp" type="button">Volume Up</button>
18
      <button id="volumeDown" type="button">Volume Down</button>
19
      <button id="mute" type="button">Mute</button>
20
    </div>
21
    <div>
22
      Volume: <input type="range" id="volume" min="0" max="10" value="10" />
23
    </div>
24
    <div>
25
      Song: <span id="title"></span>
26
    </div>
27
    <div>
28
      Time: <span id="currentTime"></span>/<span id="duration"></span>
29
    </div>
30
    <div>
31
      Position: <input type="range" id="position" min="0" value="0" />
32
    </div>
33
  </form>
34
</body>
35
</html>
 
CSS 
body {
1
body {
2
  padding: 1em;
3
}
 
JavaScript 
 
1
 
2
  var stepVolume = 0.1;
3
 
4
  // MODEL
5
  function audioEngine(audioList) {
6
7
    // Properties
8
    this.audioList = $.parseJSON(JSON.stringify(audioList));
9
    this.audio = {};
10
    this.title = null;
11
    this.timeStep = 5;
12
 
13
    // Engine methods
14
    this.init = function() {
15
      var audioData = this.audioList;
16
      this.audio = new Audio();
17
      this.audio.src = audioData.file;
18
      this.title = audioData.title;
19
      this.audio.load();
20
      console.log("Loaded audio '" + this.title + "'");
21
    }
22
 
23
    this.play = function() {
24
      this.audio.play();
25
    }
26
 
27
    this.pause = function() {
28
      this.audio.pause();
29
    }
30
 
31
    this.stop = function() {
32
      this.audio.pause();
33
      this.audio.currentTime = 0;
34
    }
35
 
36
    this.forward = function() {
37
      this.audio.currentTime += this.timeStep;
38
    }
39
 
40
    this.back = function() {
41
      this.audio.currentTime -= this.timeStep;
42
    }
43
 
44
    this.volumeUp = function() {
45
      this.audio.volume += (this.audio.volume <= (1 - stepVolume)) ? stepVolume: null;
46
      this.audio.volume = this.audio.volume.toFixed(1);
47
    }
48
 
49
    this.volumeDown = function() {
50
      this.audio.volume -= (this.audio.volume >= stepVolume) ? stepVolume : null;
51
      this.audio.volume = this.audio.volume.toFixed(1);
52
    }
53
  }
54
 
55
  // CONTROLLER
56
  function audioControls(audioList) {
57
 
58
    // Hooks
59
    var container = $("#audioPlayer");
60
    var playButton = $("#play");
61
    var pauseButton = $("#pause");
62
    var stopButton = $("#stop");
63
    var backButton = $("#back");
64
    var forwardButton = $("#forward");
65
    var volumeUpButton = $("#volumeUp");
66
    var volumeDownButton = $("#volumeDown");
67
    var volumeSlider = $("#volume");
68
    var muteButton = $("#mute");
69
    var positionSlider = $("#position");
70
    var self = this;
71
 
72
    // Properties
73
    this.engine = new audioEngine(audioList);
74
    this.engine.init();
75
 
76
    this.display = new audioDisplay(this.engine.audio, this.engine.title);
77
 
78
    // Interface Actions Listeners
79
    playButton.click(function() {
80
      self.engine.play();
81
    });
82
 
83
    pauseButton.click(function() {
84
      self.engine.pause();
85
    });
86
 
87
    stopButton.click(function() {
88
      self.engine.stop();
89
    });
90
 
91
    forwardButton.click(function() {
92
      self.engine.forward();
93
    });
94
 
95
    backButton.click(function() {
96
      self.engine.back();
97
    });
98
 
99
    volumeUpButton.click(function() {
100
      self.engine.volumeUp();
101
    });
102
 
103
    volumeDownButton.click(function() {
104
      self.engine.volumeDown();
105
    });
106
 
107
    muteButton.click(function() {
108
      self.engine.audio.muted = (self.engine.audio.muted != true) ? true : false;
109
    });
110
 
111
    volumeSlider.change(function() {
112
      self.engine.audio.volume = ($(this).val()/10).toFixed(1);
113
    });
114
 
115
    positionSlider.change(function() {
116
      self.engine.audio.currentTime = $(this).val();
117
    });
118
 
119
  }
120
 
121
  // VIEW
122
  function audioDisplay(audioObject, title) {
123
 
124
    // Hooks
125
    var currentTimeShow = $("#currentTime");
126
    var durationShow = $("#duration");
127
    var positionSlider = $("#position");
128
    var titleAudio = $("#title");
129
    var volumeSlider = $("#volume");
130
    var self = this;
131
 
132
    // Properties
133
    this.audioObject = audioObject;
134
    this.title = title;
135
 
136
    // Events Listeners while playing
137
    this.audioObject.addEventListener("playing", function() {
138
      setInterval(function(){
139
        self.updatePlayer();
140
      }, 1000);
141
    });
142
 
143
    this.audioObject.addEventListener("loadedmetadata", function() {
144
      self.updatePlayer();
145
      self.showDuration();
146
      self.showTitle();
147
      self.setFinalPositionSlider();
148
    });
149
 
150
    this.audioObject.addEventListener("volumechange", function() {
151
      volumeSlider.val(self.audioObject.volume*10).val();
152
    });
153
 
154
    this.audioObject.addEventListener("ended", function() {
155
      self.audioObject.currentTime = 0;
156
    });
157
 
158
    // Display methods
159
 
160
    this.updatePlayer = function() {
161
      var currentTime = parseTime(self.audioObject.currentTime);
162
      currentTimeShow.html(currentTime);
163
      self.updatePositionSlider();
164
    }
165
 
166
    this.updatePositionSlider = function() {
167
      var currentTime = Math.round(self.audioObject.currentTime);
168
      positionSlider.val(currentTime).val();
169
    }
170
 
171
    this.showDuration = function() {
172
      var duration = parseTime(self.audioObject.duration)
173
      durationShow.html(duration);
174
    }
175
 
176
    this.showTitle = function() {
177
      titleAudio.html(self.title);
178
    }
179
 
180
    this.setFinalPositionSlider = function() {
181
      positionSlider.attr("max", self.audioObject.duration);
182
    }
183
 
184
    function parseTime(time) {
185
      var currentTime = new Date(time * 1000);
186
      var min = currentTime.getMinutes();
187
      var sec = currentTime.getSeconds();
188
      min = (min < 10) ? "0" + min : min;
189
      sec = (sec < 10) ? "0" + sec : sec;
190
      return  min + ':' + sec;
191
    }
192
  }
193
194
  $(document).ready(function() {
195
 
196
    // Audio Files
197
    var audioList = { 'file' : 'http://www.oscargascon.es/wp-content/media/slash.mp3', 'title' : 'Slash by Other Noises' };
198
    // Launching!
199
    new audioControls(audioList);
200
  });
201
 
 

Audio Player with jQuery, MVC & OOP

CSSDeck G+