html音乐列表在线播放,HTML5 音乐播放列表

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

'use strict';

function _classCallCheck(instance, Constructor) {

if (!(instance instanceof Constructor)) {

throw new TypeError('Cannot call a class as a function');

}

}

var Song = (function() {

function Song(title, artist, duration, image) {

_classCallCheck(this, Song);

this.title = title;

this.artist = artist;

this.duration = duration;

this.imageUrl = image;

this.isPlaying = false;

}

Song.prototype.play = function play() {

this.isPlaying = true;

};

Song.prototype.stop = function stop() {

this.isPlaying = false;

};

Song.prototype.toHTML = function toHTML(block, index) {

// block as in BEM for `header` and `song`

return '\n

• \n
• \n
• ' + this.title + '\n
• ' + this.artist + '\n
• ' + this.duration + '\n ' + (block === 'song' ? '
• ' : '') + '\n

';

};

return Song;

})();

var Player = (function() {

function Player() {

_classCallCheck(this, Player);

this.songs = [];

this.nowPlayingIndex = 0;

this.$header = $('#header');

this.$playlist = $('#playlist');

this.$stop = $('#stop');

this.$play = $('#play');

}

Player.prototype.add = function add(songs) {

var _this = this;

songs.forEach(function(song) {

_this.songs.push(song);

});

};

Player.prototype.render = function render() {

this.renderPlaylist();

this.renderHeader();

};

Player.prototype.play = function play() {

this.songs[this.nowPlayingIndex].play();

this.$play.hide();

this.$stop.show();

this.render();

};

Player.prototype.stop = function stop() {

this.songs[this.nowPlayingIndex].stop();

this.$stop.hide();

this.$play.show();

this.render();

};

Player.prototype.next = function next() {

this.stop();

this.nowPlayingIndex++;

if (this.nowPlayingIndex === this.songs.length) {

this.nowPlayingIndex = 0;

}

this.play();

};

Player.prototype.previous = function previous() {

this.stop();

this.nowPlayingIndex--;

if (this.nowPlayingIndex < 0) {

this.nowPlayingIndex = this.songs.length - 1;

}

this.play();

};

Player.prototype.select = function select(index) {

this.stop();

this.nowPlayingIndex = index;

this.play();

};

Player.prototype.renderPlaylist = function renderPlaylist() {

var _this2 = this;

this.$playlist.html('');

this.songs.forEach(function(song, index) {

_this2.$playlist.append(song.toHTML('song', index));

});

};

Player.prototype.renderHeader = function renderHeader() {

this.$header.html('');

this.$header.html(this.songs[this.nowPlayingIndex].toHTML('header'));

};

Player.prototype.render = function render() {

this.renderPlaylist();

this.renderHeader();

};

return Player;

})();

var player = new Player();

// Song list

player.add([new Song('Counting Starts', 'OneRepublic', '4:17', 'https://upload.wikimedia.org/wikipedia/en/3/37/OneRepublic_Counting_Stars_cover.png'), new Song('Do it', 'Tuxedo', '4:19', 'http://static.djbooth.net/pics-artist/tuxedo.jpg'), new Song('Paradise', 'Coldplay', '4:38', 'http://popcrush.com/files/2011/09/coldplay-paradise.jpg')]);

player.play();