1
0
Fork 0

More audio player skeletton

master
Matthieu Lalonde 12 years ago
parent e5c2ba602a
commit 5e69c790a4

@ -533,3 +533,7 @@ table tbody .itemplaying td:first-child span {
table tbody .itempaused td:first-child span {
background-image: url('../img/playicon.png');
}
.disabled {
cursor: not-allowed;
}

@ -166,6 +166,14 @@ _
that.Views.Main.setView("playlist", that.Views.Playlist);
that.View.Main.on("action:item", function __fnAppEventMainViewActionItem (event) {
});
that.View.Main.on("action:playorder", function __fnAppEventMainViewActionItem (event) {
});
that.Views.Footer.on("toggle:sidebar", function __fnAppEventTogglerSiderBar (event) {
that.Views.App.toggleSideBar();
that.Views.Main.resizeView();

@ -6,13 +6,165 @@
/*jslint devel:true */
define([
"underscore"
, "jquery"
, "toolbox"
, "backbone"
]
, function (
_
, $
, Toolbox
, Backbone
) {
"use strict";
var WebAudio = function() {};
var WebAudio = Toolbox.Base.extend(_.extend({
_defaultOpts: {
autoplay: "autoplay"
, preload: "auto"
, controls: false
, loop: false
, src: ""
}
, obj: new Audio()
, $obj: null
, constructor: function () {
var that = this
;
_.bindAll(this
// Public
, "loadMedia"
// Private
, "_bindAudio"
// Events
, "__audioProgress"
, "__audioError"
, "__audioPause"
, "__audioPlay"
, "__audioTimeUpdate"
, "__audioLoadStart"
, "__audioCanPlay"
, "__audioEnded"
);
that.$obj = $(that.obj);
that.obj.attributes = _.extend({}, that.obj.attributes, that._defaultOpts);
return that;
}
/**
* PUBLIC
**/
, loadMedia: function (uri) {
var that = this
;
that.obj.stop();
}
/**
* PRIVATE
**/
, _bindAudio: function () {
var that = this
;
that.$obj.unbind();
that.$obj.on("loadstart", that.__audioLoadStart);
that.$obj.on("progress", that.__audioProgress);
//that.$obj.on("suspend", that.__audioSuspend);
//that.$obj.on("abort", that.__audioAbort);
that.$obj.on("error", that.__audioError);
//that.$obj.on("emptied", that.__audioEmptied);
//that.$obj.on("stalled", that.__audioStalled);
that.$obj.on("pause", that.__audioPause);
that.$obj.on("play", that.__audioPlay);
//that.$obj.on("loadedmetadata", that.__audioLoadedMetaData);
//that.$obj.on("loadeddata", that.__audioLoadedData);
//that.$obj.on("waiting", that.__audioWaiting);
//that.$obj.on("playing", that.__audioPlaying);
that.$obj.on("canplay", that.__audioCanPlay);
//that.$obj.on("canplaythrough", that.__audioCanPlayThrough);
//that.$obj.on("seeking", that.__audioSeeking);
//that.$obj.on("seeked", that.__audioSeeked);
that.$obj.on("timeupdate", that.__audioTimeUpdate);
that.$obj.on("ended", that.__audioEnded);
//that.$obj.on("ratechange", that.__audioRateChanged);
//that.$obj.on("durationchange", that.__audioDurationChange);
//that.$obj.on("volumechange", that.__audioVolumeChange);
}
/**
* EVENTS
**/
, __audioProgress: function (event) {
}
, __audioError: function (event) {
}
, __audioPause: function (event) {
var that = this
;
}
, __audioPlay: function (event) {
var that = this
;
}
, __audioTimeUpdate: function (event) {
var that = this
;
}
, __audioLoadStart: function (event) {
var that = this
;
}
, __audioCanPlay: function (event) {
var that = this
;
}
, __audioEnded: function (event) {
var that = this
;
}
}, Backbone.Events));
return WebAudio;
});

@ -26,7 +26,28 @@ _
) {
"use strict";
var Player = Backbone.View.extend({
if (!_.isFunction(Array.prototype.shuffle)) {
Array.prototype.shuffle = function() {
var len = this.length
, i = len
;
if ( len === 0 ) {
return false;
}
while (i--) {
var p = parseInt(Math.random()*len, 10);
var t = this[i];
this[i] = this[p];
this[p] = t;
}
};
}
var
Player = Backbone.View.extend({
elViewport: null
, $elViewport: null
@ -46,19 +67,35 @@ _
, _stateAudio: null
, _state: null
, _states: {
stopped: 0
, loading: 1
, playing: 2
, paused: 3
}
, events: {
//"click #add-friend": "showPrompt",
"click div:first-child > a.buttonPrev": "__buttonPrevious"
, "click div:first-child > a.buttonNext": "__buttonNext"
, "click div:first-child > a.buttonPlay": "__buttonPlayPause"
"click div:first-child > a.buttonPrev":
"__buttonPrevious"
, "click div:first-child > a.buttonNext":
"__buttonNext"
, "click div:first-child > a.buttonPlay":
"__buttonPlayPause"
// Volume Down
, "click div:first-child > .playerVolumeWrapper > a:first-child": "__buttonVolumeDown"
, "click div:first-child > .playerVolumeWrapper > a:first-child":
"__buttonVolumeDown"
// Volume Up
, "click div:first-child > .playerVolumeWrapper > a:last-child": "__buttonVolumeUp"
, "click div:first-child > .playerVolumeWrapper > a:last-child":
"__buttonVolumeUp"
// Volume click
, "click div:first-child > .playerVolumeWrapper > input": "__buttonVolumeClick"
, "click div:first-child > .playerVolumeWrapper > input":
"__buttonVolumeClick"
// Seek input
, "click div:last-child > .playerProgressWrapper > progress": "__buttonSeek"
, "click div:last-child > .playerProgressWrapper > progress":
"__buttonSeek"
}
, initialize: function (options) {
@ -66,8 +103,12 @@ _
;
_.bindAll(this
// Public
, "setPlayIndex"
, "setRandomState"
, "setRepeatState"
, "playItem"
// Events
, "__buttonPlayPause"
, "__buttonNext"
, "__buttonPrevious"
@ -75,7 +116,9 @@ _
, "__buttonVolumeDown"
, "__buttonVolumeClick"
, "__buttonSeek"
, "_createWebAudio"
// Private
, "_waCreate"
, "_waBindEvents"
, "__waStateChanged"
, "_playerEnded"
, "_playerLoading"
@ -102,6 +145,8 @@ _
that.$el.append(that.elViewport);
that._waCreate();
return that;
}
@ -112,20 +157,39 @@ _
var that = this
;
that._playIndex = index;
that._playCursor = 0;
if (that._stateRandom) {
that.setRandomState(that._stateRandom);
}
return that._playIndex;
}
, setRandomState: function (random) {
var that = this
;
if (random === true) {
that._playIndex.shuffle();
}
// TODO: Set cursor back to the item that was playing
return that._stateRandom = random;
}
, setRepeatState: function (random) {
, setRepeatState: function (repeat) {
var that = this
;
return that._stateRepeat = repeat;
}
, playItem: function (item) {
}
/**
* EVENTS
**/
@ -175,10 +239,15 @@ _
* PRIVATE
**/
// Audio Player
, _createWebAudio: function () {
, _waCreate: function () {
var that = this
;
return that.webAudio = new WebAudio();
}
, _waBindEvents: function () {
}
, __waStateChanged: function () {

@ -12,6 +12,6 @@
<form action="#" class="form-search controls">
<div class="input-prepend">
<button type="submit" tabindex="-1" class="btn"><i class="icon-search"></i></button>
<input type="text" tabindex="1" class="span3 search-query">
<input type="text" tabindex="1" class="span3 search-query" x-webkit-speech>
</div>
</form>
Loading…
Cancel
Save