问题：
在播放列表中自动播放下一首曲目
富钧
我正在学习如何为某些曲目创建媒体播放器的教程...每首歌都按我的要求播放然后停止...我想让整个播放列表播放...那是为了在前一个赛道结束后，下一个赛道自动开始...
<html>
<head>
<title>HTML5 Audio Player</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="container">
<div id="audio-image">
<img class="cover">
</div>
<div id="audio-player">
<div id="audio-info">
<span class="artist"></span> - <span class="title"></span>
</div>
<input id="volume" type="range" min="0" max="10" value="4">
<br>
<div id="buttons">
<span>
<button id="prev"></button>
<button id="play"></button>
<button id="pause"></button>
<button id="stop"></button>
<button id="next"></button>
</span>
</div>
<div class="clearfix"></div>
<div id="tracker">
<div id="progress-bar">
<span id="progress"></span>
</div>
<span id="duration">0:00</span>
</div>
<div class="clearfix"></div>
<ul id="playlist" class="hidden">
<li song="advert-1.mp3" cover="cover1.jpg" artist="Miss Ramos">advert-1.mp3</li>
<li song="advert-2.mp3" cover="cover1.jpg" artist="Miss Ramos">advert-2.mp3</li>
<li song="advert-3.mp3" cover="cover1.jpg" artist="Miss Ramos">advert-3.mp3</li>
<li song="advert-4.mp3" cover="cover1.jpg" artist="Miss Ramos">advert-4.mp3</li>
<li song="audiobook-part-1.mp3" cover="cover1.jpg" artist="Miss Ramos">audiobook-part-1.mp3</li>
<li song="audiobook-part-2.mp3" cover="cover1.jpg" artist="Miss Ramos">audiobook-part-2.mp3</li>
<li song="telephon-1.mp3" cover="cover1.jpg" artist="Miss Ramos">telephon-1.mp3</li>
</ul>
</div>
</div>
<script src="js/jquery-3.5.1.js"></script>
<script src="js/main.js"></script>
</body>
</html>
*{
margin:0;
padding:0;
border:none;
outline:none;
}
body{
font-family:Arial;
font-size:13px;
line-height:1.5em;
color:#fff;
background:#78284a; /* old browsers */
background:-moz-linear-gradient(left, #78284a 0%, #6d8a9f 100%); /* FF3.6+ */
background:-webkit-gradient(linear, left top, right top, color-stop(0%,#78284a), color-stop(100%,#6d8a9f));
background:-webkit-linear-gradient(left, #78284a 0%, #6d8a9f 100%); /* Chrome10+, Safari5.1+ */
background:-o-linear-gradient(left, #78284a 0%, #6d8a9f 100%); /* Opera 11.10+ */
background:-ms-linear-gradient(left, #78284a 0%, #6d8a9f 100%); /* IE10+ */
background:linear-gradient(to right, #78284a 0%, #6d8a9f 100%); /* W3C */
}
.clearfix{
clear:both;
}
#container{
width:330px;
min-height:400px;
background:#333;
overflow:auto;
margin:20px auto;
border-radius:10px;
box-shadow:0 10px 8px -8px #333;
}
#audio-image{
position:relative;
overflow:hidden;
height:200px;
margin-bottom:15px;
}
#audio-image .cover{
width:100%;
}
#audio-info{
text-align:center;
margin-bottom: 7px; // added by self;
}
#audio-info .artist{
font-weight:bold;
}
input#volume{
width:95%;
margin-left:2%;
/* -webkit-appearance:none !important; browser vol sytles overridden in vid*/
background:#ccc;
height:1px;
margin-bottom:20px;
}
input#volume::-webkit-slider-thumb{
/*
-webkit-appearance:none !important; browser volume styles overriden in vid
background:url(../images/knob.png) no-repeat; knob png required
*/
height:12px;
width:12px;
}
#buttons{
width:90%;
display:block;
margin:15px auto;
margin-left:23px;
overflow:auto;
}
button#play{
width:50px; /*vid values set to 70px*/
height:50px; /*vid values set to 70px*/
background:url(../images/circled-play.png);
background-size:cover; /*look for background short-hand*/
background-repeat:no-repeat;
background-position:center center;
float:left;
margin-left:-2px;
}
button#pause{
width:50px; /*vid values set to 70px*/
height:50px; /*vid values set to 70px*/
background:url(../images/circled-pause.png);
background-size:cover; /*look for background short-hand*/
background-repeat:no-repeat;
background-position:center center;
float:left;
margin-left:-2px;
}
button#stop{
width:50px; /*vid values set to 70px*/
height:50px; /*vid values set to 70px*/
background:url(../images/stop-circled.png);
background-size:cover; /*look for background short-hand*/
background-repeat:no-repeat;
background-position:center center;
float:left;
margin-left:3px;
}
button#prev{
width:50px; /*vid values set to 70px*/
height:50px; /*vid values set to 70px*/
background:url(../images/rewind-button-round.png);
background-size:cover; /*look for background short-hand*/
background-repeat:no-repeat;
background-position:center center;
float:left;
margin-top:0; /*vid set to 15px*/
}
button#next{
width:50px; /*vid values set to 70px*/
height:50px; /*vid values set to 70px*/
background:url(../images/fast-forward-round.png);
background-size:cover; /*look for background short-hand*/
background-repeat:no-repeat;
background-position:center center;
float:left; /*vid value set 'right'*/
margin-left:0px; /*vid value set 15px*/
}
#tracker{
position:relative;
width:100%;
}
#progress-bar{
width:80%;
margin-left:2%; /*vid set to 2% */
margin-bottom:20px;
margin-top:9px;
height:10px;
background:url(../images/progress-bar.png) no-repeat;
float:left;
}
#progress{
background:url(../images/ ) no-repeat; /* remember to update this selector (watch chap45 @ 08:36) */
height:10px;
display:inline-block;
}
#duration{
position:absolute;
top:0;
right:10px;
padding: 4px 8px;
background:#000;
border-radius:5px;
}
#playlist{
list-style:none;
}
#playlist li{
cursor:pointer;
margin:5px;
}
#playlist li.active{
font-weight:bold;
padding:3px;
background:#666;
}
var audio;
//Hide Pause
$('#pause').hide();
initAudio($('#playlist li:first-child'));
function initAudio(element){
var song = element.attr('song');
var title = element.text();
var cover = element.attr('cover');
var artist = element.attr('artist');
//Create audio object
audio = new Audio('media/'+ song);
//Insert audio info
$('.artist').text(artist);
$('.title').text(title);
//Insert song cover
$('img.cover').attr('src','images/covers/'+cover);
$('#playlist li').removeClass('active');
element.addClass('active');
}
//Play button
$('#play').click(function(){
audio.play();
$('#play').hide();
$('#pause').show();
showDuration();
});
//Pause button
$('#pause').click(function(){
audio.pause();
$('#play').show();
$('#pause').hide();
});
//Stop button
$('#stop').click(function(){
audio.pause();
audio.currentTime = 0;
});
//Next button
$('#next').click(function(){
audio.pause();
var next = $('#playlist li.active').next();
if(next.length == 0){
next = $('playlist li:first-child');
}
initAudio(next);
audio.play();
showDuration();
});
//Prev button
$('#prev').click(function(){
audio.pause();
var prev = $('#playlist li.active').prev();
if(prev.length == 0){
prev = $('playlist li:last-child');
}
initAudio(prev);
audio.play();
showDuration();
});
//Playlist song click
$('#playlist li').click(function(){
audio.pause();
initAudio($(this));
$('#play').hide();
$('#pause').show();
audio.play();
showDuration();
});
//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;
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+'%');
});
}
多谢...
共有1个答案
颛孙晗昱
可以使用带有结束事件的AddEventListener
audio.addEventListener('ended',function(){
var next = $('#playlist li.active').next();
if(next.length == 0){
next = $('playlist li:first-child');
}
initAudio(next);
audio.play();
showDuration();
});
您可以将其放在initAudio函数中
类似资料：
-
我有一个创建和播放我播放列表的文字JS对象。在HTML页面中，我有一个包含我所有曲目的列表。当我点击某些曲目时，一切正常，但当我点击一个曲目，等待曲目结束时，下一个曲目就不播放了。这是我的代码的部分： 还有一件事，当第一首歌曲结束并调用下一首歌曲的播放时，曲目没有加载（onload事件没有消息返回）。谢谢，对不起我的英语不好。A. 好的，我试着在设置上添加“FlashVersion:9”，这就解决
-
我正在制作音频播放器（android）。问题是我什么时候启动我的应用程序
-
目前正在开发一个网站，该网站将spotify播放列表及其URI嵌入如下：“https://embedd.spotify.com/？URI=spotify:playlist:4HyauylCBHW9se152noiy0”我想知道是否有一个自动播放参数允许播放列表在加载网页时自动播放？ 最后，如果Spotify Web API不允许自动播放播放列表，其他人知道允许自动播放的平台吗？这篇文章提到了Sou
-
我正在编写一个，其中我提供了功能，几乎满足了我的需求，但面临一些小问题。 我是如何实现我的音乐播放器的： 正在列出SD卡中可用的音频歌曲（路径类似:) 一旦用户点击任何音频，然后启动媒体播放器 在媒体播放器屏幕中，我为用户提供了返回音频列表的导航 用户返回，现在选择了一些其他歌曲来听（这里我面临的问题是，用户将可以播放新选择的歌曲，但也会播放旧歌曲，而一次只能播放上一次选择的歌曲，但在我的情况下，
-
问题内容： 但却无法提供我所寻找的答案。 我有一个。我试图在这种单一的组成中应用单一的MULTIPLE 。这是因为我用2个不同来源的不同的和的就是他们来自何处。 因此，应用它们指定的唯一方法是在2个不同的轨道中提供它们。但是，无论出于何种原因，只有第一个轨道实际上会提供任何视频，就像第二个轨道永远不在那儿一样。 所以，我尝试了 1）使用，并使用和一起使用，效果很好，我仍在进行转换，但可以。但是视频
-
所以我用javafx制作了一个mp3播放器，它有一个，在这里我拖放歌曲，然后选择一首歌曲并按play播放，你就明白了。问题是，用我当前的代码，我不能播放两首以上歌曲的序列：/（播放选定的歌曲，播放它旁边的歌曲，然后停止）。代码如下：