JavaScript/JQuery音频播放器”;接下来”;
JavaScript / JQuery Audio player "Next"
这里我有一个音频播放器,我可以双击歌曲播放,但现在我想让next
button
工作
我想用播放按钮播放下一首歌,但我不知道怎么做,这是我到目前为止得到的
html:
<div class="audio-player-pad">
<div class="container Test">
<div id="audio-image">
<img class="cover"/>
</div>
<div id="audio-player">
<div id="audio-info">
<span class="title"></span> - <span class="artist"></span>
</div>
<input id="volume" type="range" min="0" max="10" value="5" />
<br>
<div id="buttons">
<span>
<button class="img" id="prev"></button>
<button id="play"></button>
<button id="pause"></button>
<button id="stop"></button>
<button id="next"></button>
<div id="tracker">
<div id="progressBar">
<span id="progress"></span>
</div>
<span id="duration"></span>
</div>
</span>
</div>
<table id="playlist">
<tr class="bold clickN">
<td>ID:</td>
<td id="first" cover="emptycover.png" artist="Artist">Track-Name:</td>
<td>Artist:</td>
<td>Duration:</td>
</tr>
<tr>
<td class="idD" song="Weown.mp3" cover="ownCover.png" artist="The Wanted" >1</td>
<li><td >We Own The Night</td></li>
<td>The Wanted</td>
<td class="idD">3:25</td>
</tr>
<tr>
<td class="idD">2</td>
<li><td song="Live_For_The_Night_-_Krewella.mp3" cover="LiveCover.gif" artist="Krewella">Live For The Night</td></li>
<td>Krewella</td>
<td class="idD">3:27</td>
</tr>
<tr>
<td class="idD">3</td>
<li><td song="Not_Alone_Original_Mix.mp3" cover="NotCover.jpg" artist="Mako">Not Alone</td></li>
<td>Mako</td>
<td class="idD">4:46</td>
</tr>
<tr>
<td class="idD">3</td>
<li><td song="Two.mp3" cover="TwoCover.png" artist="Styline">Two Days Of Hope</td></li>
<td>Styline</td>
<td class="idD">3:55</td>
</tr>
<tr>
<td class="idD">4</td>
<li><td song="Volvo_IKEA_(Official lyric video).mp3" cover="ikeaCover.png" artist="Sander Hoogendoorn">Volvo Ikea</td></li>
<td>Sander Hoogendoorn</td>
<td class="idD">2:09</td>
</tr>
<tr>
<td class="idD">5</td>
<li><td song="TBD.mp3" cover="emptycover.png" artist="TBD">TBD</td></li>
<td>TBD</td>
<td class="idD">TBD</td>
</tr>
<tr>
<td class="idD">6</td>
<li><td song="TBD.mp3" cover="emptycover.png" artist="TBD">TBD</td></li>
<td>TBD</td>
<td class="idD">TBD</td>
</tr>
</table>
</div>
</div>
</div>
JavaScript/JQuery:
var audio;
//Hide Pause Initially
$('#pause').hide();
//Initializer - Play First Song
initAudio($('#first'));
function initAudio(element){
var song = element.attr('song');
var title = element.text();
var cover = element.attr('cover');
var artist = element.attr('artist');
//Create a New Audio Object
audio = new Audio('Music/' + song);
if(!audio.currentTime){
$('#duration').html('0.00');
}
$('#audio-player .title').text(title);
$('#audio-player .artist').text(artist);
//Insert Cover Image
$('img.cover').attr('src','Pics/Cover/' + cover);
$('#playlist tr').removeClass('active');
element.parent('tr').addClass('active');
}
//Play Button
$('#play').click(function(){
audio.play();
$('#play').hide();
$('#pause').show();
$('#duration').fadeIn(400);
showDuration();
});
//Pause Button
$('#pause').click(function(){
audio.pause();
$('#pause').hide();
$('#play').show();
});
//Stop Button
$('#stop').click(function(){
audio.pause();
audio.currentTime = 0;
$('#pause').hide();
$('#play').show();
$('#duration').fadeOut(400);
});
//Next Button
$('#next').click(function(){
audio.pause();
var next = $('#playlist tr.active').next();
initAudio(next);
audio.play();
showDuration();
$('#play').hide();
$('#pause').show();
});
//Prev Button
$('#prev').click(function(){
audio.pause();
var prev = $('#playlist tr.active').prev();
if (prev.length == 0) {
prev = $('#playlist tr:last-child');
}
initAudio(prev);
audio.play();
showDuration();
$('#play').hide();
$('#pause').show();
});
//Playlist Song dblClick
$('#playlist td:nth-child(2)').dblclick(function () {
audio.pause();
initAudio($(this, 'td:nth-child(2)'));
$('#play').hide();
$('#pause').show();
$('#duration').fadeIn(400);
audio.play();
showDuration();
});
//Playlist song click
$('#playlist td:nth-child(2)').click(function() {
audio.pause();
$('#pause').hide();
$('#play').show();
});
//Volume Control
$('#volume').change(function(){
audio.volume = parseFloat(this.value / 10);
});
//Time Duration
function showDuration(){
$(audio).bind('timeupdate', function(){
//Get hours and minutes
var s = parseInt(audio.currentTime % 60);
var m = parseInt((audio.currentTime / 60) % 60);
//Add 0 if seconds less than 10
if (s < 10) {
s = '0' + s;
}
$('#duration').html(m + '.' + s);
var value = 0;
if (audio.currentTime > 0) {
value = Math.floor((100 / audio.duration) * audio.currentTime);
}
$('#progress').css('width',value+'%');
});
}
在html5中没有"next/prev"默认功能。所有api让你做的都是进入一个单独的轨道,这就是全部。
我将创建一个关于如何处理这种情况的小示例。请考虑到我现在有点忙,可能有一些打字错误。但我只想向你展示构建一个一致的音乐播放器的一般逻辑。
所以,试着使用这种模块化/oo风格并进行改进,我相信你可以。
你可以使用javascript来管理你的轨迹,比如:
var getTrack = function( val ){
var obj = TRACKS;
var track = obj.filter(function( obj ) {
return obj.id == val;
});
return track[0];
}
var playlist = [];
var TRACKS = [{
id: 0,
name: 'music 1',
src: 'path/to/file.mp3',
icon: 'path/to/icon;jpg',
foo: 'bar'
},{
id: 1,
name: 'music 2',
src: 'path/to/file.mp3',
icon: 'path/to/icon;jpg',
foo: 'bar'
}];
playlist = [1, 2];
var player = function(){
var currentPlaying = false;
var playlistPos = false;
var playlist = false;
var trackList = false;
this.setPlaylist = function( p ){
playlist = p;
playlistPos = 0;
setTrack(trackList[0], 0);
return this;
}
this.setTrackList = function( t ){
trackList = t;
return this;
}
this.setTrack = function( obj, i ){
currentPlaying = obj;
playlistPos = i;
audio.src = obj.src;
audio.load();
//here you can manage the another
//info data from the track object, like setting the track icon
return this;
}
this.play = function( obj ){
audio.play();
return this;
}
this.stop = function(){
audio.pause();
audio.currentTime = 0;
return this;
}
this.pause = function(){
audio.pause();
}
//this is what you really want
this.next = function(){
if(playlist && currentPlaying){
var next = (playlist[playlistPos++]) ? playlistPos++ : 0;
setTrack(trackList[next], next);
}
return this;
}
}
//Initialize
PLAYER = new player();
PLAYER.setTrackList(TRACK).setPlaylist(playlist).play();
之后,您可以简单地进行
PLAYER.next();
//or even
$('.next').on('click', PLAYER.next);
它会起作用的。
相关文章:
- 一点javascript元编程&可链接的设置器
- 如何检查用户在html5视频播放器中观看了完整的视频
- 音乐播放器使用相同的id播放所有内容
- 接下来选择与筛选器匹配的选项
- 日期选择器如何跳过接下来的5天
- 我的mp3链接被下载,而不是在我的网络播放器上流式传输
- 在html5视频播放器中一个接一个地播放视频
- 节点/套接字 IO 多个播放器
- 使用 JW 播放器闪光灯进行静音切换的链接,回退到 HTML5 视频不起作用
- 在WordPress中的Youtube播放器中包含跳转到特定时间的链接
- 带有 Youtube 链接的 JW 播放器在 IE9 上不起作用
- 如何使用播放器JavaScript检测断开的视频链接
- JavaScript/JQuery音频播放器”;接下来”;
- 如何添加/删除'prev'和'接下来'类在Bootstrap中循环播放幻灯片
- HTML音频播放器轨道链接在新浏览器打开
- 如何使用在线链接在视频播放器中添加字幕
- 用视频播放器代替YouTube链接
- SoundManager2(音频播放器):检索单击的链接的ID
- JS视频播放器从视频下载链接
- flexslider的WP选项卡不会播放接下来的第二和第三张幻灯片