Permalink
Browse files

converted music player to use custom control bar with soundmanager

  • Loading branch information...
1 parent 8364021 commit 83a8e1da6894eea212f0dfd75be6cbce129f04e8 Eric Matthys committed May 10, 2012
View

Large diffs are not rendered by default.

Oops, something went wrong.
View
Deleted file not rendered
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

Large diffs are not rendered by default.

Oops, something went wrong.
View

Large diffs are not rendered by default.

Oops, something went wrong.
View
@@ -17,6 +17,7 @@ require.config({
'base64': 'libs/base64',
'sha256': 'libs/jssha256-0.1',
'mediaelement': 'libs/mediaelement-2.8.1',
+ 'soundmanager': 'libs/soundmanager2',
// Require
'use': 'libs/require/use-0.2.0',
@@ -53,6 +54,7 @@ require.config({
base64: {},
sha256: {},
mediaelement: {},
+ soundmanager: {},
// Bootstrap
transition: { deps: ['jquery'] },
View
@@ -6,6 +6,7 @@ define(
// Globals
'plex/control/init/BackboneInit',
'plex/control/init/HandlebarsInit',
+ 'plex/control/init/SoundManagerInit',
'use!date',
'use!button',
'use!dropdown',
@@ -0,0 +1,16 @@
+// Declare global variable to let SoundManager know we are deferring init
+var SM2_DEFER = true;
+
+define(
+ [
+ // Globals
+ 'use!soundmanager'
+ ],
+
+ function () {
+ soundManager = new SoundManager();
+ soundManager.url = 'swf/';
+ soundManager.flashVersion = 9;
+ soundManager.beginDelayedInit();
+ }
+);
@@ -0,0 +1,39 @@
+define(
+ [
+ // Globals
+ 'use!backbone'
+ ],
+
+ function () {
+ var PlayerModel = Backbone.Model.extend({
+ defaults: {
+ currentTime: 0,
+ duration: 0,
+ formattedTime: '0:00',
+ formattedDuration: '0:00',
+ volume: 0,
+ paused: true,
+ ended: false,
+ buffering: false,
+ startBuffer: 0,
+ endBuffer: 0,
+ fullscreen: false
+ },
+
+ reset: function () {
+ this.set(this.defaults);
+ },
+
+ secondsToHms: function (seconds) {
+ seconds = Number(seconds);
+ var h = Math.floor(seconds / 3600);
+ var m = Math.floor(seconds % 3600 / 60);
+ var s = Math.floor(seconds % 3600 % 60);
+
+ return ((h > 0 ? h + ':' : '') + (m > 0 ? (h > 0 && m < 10 ? '0' : '') + m + ':' : '0:') + (s < 10 ? '0' : '') + s);
+ }
+ });
+
+ return PlayerModel;
+ }
+);
@@ -1,34 +1,52 @@
define(
[
- 'text!templates/players/MusicPlayerView.tpl',
'plex/control/Dispatcher',
'plex/control/utils/Transcoder',
'plex/model/AppModel',
+ 'plex/model/PlayerModel',
'plex/view/BaseView',
+ 'plex/view/players/core/ControlsView',
// Globals
'use!backbone',
'use!handlebars',
- 'use!mediaelement'
+ 'use!soundmanager'
],
- function (template, dispatcher, transcoder, appModel, BaseView) {
-
- var tpl = Handlebars.compile(template);
+ function (dispatcher, transcoder, appModel, PlayerModel, BaseView, ControlsView) {
var MusicPlayerView = BaseView.extend({
id: 'music-player',
className: 'animated slideDown',
+ playerModel: undefined,
player: undefined,
+
+ sound: undefined,
+ volume: 1, // Used to persist volume from song to song
+
nextTrack: undefined,
initialize: function () {
- _.bindAll(this, 'onEnded');
+ _.bindAll(this, 'onPlay', 'whileLoading', 'whitePlaying', 'onFinish');
+
+ this.playerModel = new PlayerModel();
+
+ this.player = this.registerView(new ControlsView({
+ model: this.playerModel,
+ hidePlaybackRate: true,
+ hideFullscreen: true
+ }));
+
+ this.addBinding(this.player, 'playPause', this.onControlsPlayPause);
+ this.addBinding(this.player, 'seek', this.onControlsSeek);
+ this.addBinding(this.player, 'change:volume', this.onControlsVolumeChange);
},
render: function () {
- this.$el.html(tpl());
+ this.$el.html('');
+
+ this.$el.append(this.player.render().el);
return this;
},
@@ -37,36 +55,21 @@ define(
var file = transcoder.file(this.model.get('Media').Part.key);
this.findNextTrack();
+ this.playerModel.reset();
this.$('.now-playing-title').html(this.model.get('title'));
- if (typeof(this.nextTrack) !== 'undefined') {
- this.$('.next-title').html(this.nextTrack.get('title'));
- this.$('.next-track').show();
- } else {
- this.$('.next-track').hide();
- }
-
- if (typeof(this.player) === 'undefined') {
- this.$('audio').attr('src', file);
-
- this.player = new MediaElementPlayer('#music-player audio', {
- //mode: 'shim',
- plugins: ['flash'],
- pluginPath: 'swf/',
- flashName: 'flashmediaelement.swf',
- startVolume: 1,
- success: function (player, element) {
- player.play();
- }
- });
-
- this.player.$media.on('ended', this.onEnded);
- } else {
- this.player.play();
- }
-
- console.log('now playing ' + file);
+ this.sound = soundManager.createSound({
+ id: 'track_' + this.model.id,
+ url: file,
+ autoLoad: true,
+ autoPlay: true,
+ volume: this.volume * 100,
+ onplay: this.onPlay,
+ whileloading: this.whileLoading,
+ whileplaying: this.whitePlaying,
+ onfinish: this.onFinish
+ });
},
findNextTrack: function () {
@@ -80,7 +83,57 @@ define(
}
},
- onEnded: function (event) {
+ onControlsPlayPause: function () {
+ var paused = this.playerModel.get('paused');
+
+ this.sound.togglePause();
+
+ console.log(paused);
+
+ this.playerModel.set('paused', !paused);
+ },
+
+ onControlsSeek: function (position) {
+ this.sound.setPosition(position * 1000);
+
+ this.playerModel.set({
+ currentTime: position,
+ formattedTime: this.playerModel.secondsToHms(position)
+ });
+ },
+
+ onControlsVolumeChange: function (volume) {
+ this.sound.setVolume(volume * 100);
+
+ this.volume = volume;
+ this.playerModel.set('volume', volume);
+ },
+
+ onPlay: function () {
+ this.playerModel.set({
+ paused: false,
+ volume: this.volume
+ });
+ },
+
+ whileLoading: function () {
+ this.playerModel.set({
+ endBuffer: this.sound.bytesLoaded / this.sound.bytesTotal * (this.sound.durationEstimate / 1000),
+ duration: this.sound.durationEstimate / 1000,
+ formattedDuration: this.playerModel.secondsToHms(this.sound.durationEstimate / 1000)
+ });
+ },
+
+ whitePlaying: function () {
+ this.playerModel.set({
+ currentTime: this.sound.position / 1000,
+ formattedTime: this.playerModel.secondsToHms(this.sound.position / 1000)
+ });
+ },
+
+ onFinish: function () {
+ this.sound.destruct();
+
if (typeof(this.nextTrack) !== 'undefined') {
this.model = this.nextTrack;
Oops, something went wrong.

0 comments on commit 83a8e1d

Please sign in to comment.