javascript - 歌曲结束后如何让auido播放器播放下一首歌曲?
问题描述
我试图在这个音频播放器中实现自动播放功能,但我无法让它工作,我已经尝试了很多年,我觉得我想放弃。任何帮助都会有所帮助。我对学习 javascript 还是很陌生,希望能在这里找到答案。我不知何故让它工作了一次,但后来我忘了实际保存代码,一切都消失了,现在我质疑我的生活选择
{
var playerTrack = $("#player-track"), bgArtwork = $('#bg-artwork'), bgArtworkUrl, albumName = $('#album-name'), trackName = $('#track-name'), albumArt = $('#album-art'), sArea = $('#s-area'), seekBar = $('#seek-bar'), trackTime = $('#track-time'), insTime = $('#ins-time'), sHover = $('#s-hover'), playPauseButton = $("#play-pause-button"), i = playPauseButton.find('i'), tProgress = $('#current-time'), tTime = $('#track-length'), seekT, seekLoc, seekBarPos, cM, ctMinutes, ctSeconds, curMinutes, curSeconds, durMinutes, durSeconds, playProgress, bTime, nTime = 0, buffInterval = null, tFlag = false, albums = ['Anthem','Bedrin','Media','Project','La Vincenza','Flamenco'], trackNames = ['Mohammed - Mo3','Mohammed - Mo3','Mohammed - Mo3','Mohammed - Mo3','Mohammed - Mo3','Mohammed - Mo3'], albumArtworks = ['_1','_2','_3','_4','_5','_6'], trackUrl = ['http://elevarbetensys.se/SY20/Group_3/Home/music/mp3/Anthem.mp3','http://elevarbetensys.se/SY20/Group_3/Home/music/mp3/Bedrin.mp3','http://elevarbetensys.se/SY20/Group_3/Home/music/mp3/Media.mp3','http://elevarbetensys.se/SY20/Group_3/Home/music/mp3/Project.mp3','http://elevarbetensys.se/SY20/Group_3/Home/music/mp3/La_Vincenza.mp3','http://elevarbetensys.se/SY20/Group_3/Home/music/mp3/Flamenco.mp3'], playPreviousTrackButton = $('#play-previous'), playNextTrackButton = $('#play-next'), currIndex = -1;
function playPause()
{
setTimeout(function()
{
if(audio.paused)
{
playerTrack.addClass('active');
albumArt.addClass('active');
checkBuffering();
i.attr('class','fas fa-pause');
audio.play();
}
else
{
playerTrack.removeClass('active');
albumArt.removeClass('active');
clearInterval(buffInterval);
albumArt.removeClass('buffering');
i.attr('class','fas fa-play');
audio.pause();
}
},300);
}
function showHover(event)
{
seekBarPos = sArea.offset();
seekT = event.clientX - seekBarPos.left;
seekLoc = audio.duration * (seekT / sArea.outerWidth());
sHover.width(seekT);
cM = seekLoc / 60;
ctMinutes = Math.floor(cM);
ctSeconds = Math.floor(seekLoc - ctMinutes * 60);
if( (ctMinutes < 0) || (ctSeconds < 0) )
return;
if( (ctMinutes < 0) || (ctSeconds < 0) )
return;
if(ctMinutes < 10)
ctMinutes = '0'+ctMinutes;
if(ctSeconds < 10)
ctSeconds = '0'+ctSeconds;
if( isNaN(ctMinutes) || isNaN(ctSeconds) )
insTime.text('--:--');
else
insTime.text(ctMinutes+':'+ctSeconds);
insTime.css({'left':seekT,'margin-left':'-21px'}).fadeIn(0);
}
function hideHover()
{
sHover.width(0);
insTime.text('00:00').css({'left':'0px','margin-left':'0px'}).fadeOut(0);
}
function playFromClickedPos()
{
audio.currentTime = seekLoc;
seekBar.width(seekT);
hideHover();
}
function updateCurrTime()
{
nTime = new Date();
nTime = nTime.getTime();
if( !tFlag )
{
tFlag = true;
trackTime.addClass('active');
}
curMinutes = Math.floor(audio.currentTime / 60);
curSeconds = Math.floor(audio.currentTime - curMinutes * 60);
durMinutes = Math.floor(audio.duration / 60);
durSeconds = Math.floor(audio.duration - durMinutes * 60);
playProgress = (audio.currentTime / audio.duration) * 100;
if(curMinutes < 10)
curMinutes = '0'+curMinutes;
if(curSeconds < 10)
curSeconds = '0'+curSeconds;
if(durMinutes < 10)
durMinutes = '0'+durMinutes;
if(durSeconds < 10)
durSeconds = '0'+durSeconds;
if( isNaN(curMinutes) || isNaN(curSeconds) )
tProgress.text('00:00');
else
tProgress.text(curMinutes+':'+curSeconds);
if( isNaN(durMinutes) || isNaN(durSeconds) )
tTime.text('00:00');
else
tTime.text(durMinutes+':'+durSeconds);
if( isNaN(curMinutes) || isNaN(curSeconds) || isNaN(durMinutes) || isNaN(durSeconds) )
trackTime.removeClass('active');
else
trackTime.addClass('active');
seekBar.width(playProgress+'%');
if( playProgress == 100 )
{
i.attr('class','fa fa-play');
seekBar.width(0);
tProgress.text('00:00');
albumArt.removeClass('buffering').removeClass('active');
clearInterval(buffInterval);
}
}
function checkBuffering()
{
clearInterval(buffInterval);
buffInterval = setInterval(function()
{
if( (nTime == 0) || (bTime - nTime) > 1000 )
albumArt.addClass('buffering');
else
albumArt.removeClass('buffering');
bTime = new Date();
bTime = bTime.getTime();
},100);
}
function selectTrack(flag)
{
if( flag == 0 || flag == 1 )
++currIndex;
else
--currIndex;
if( (currIndex > -1) && (currIndex < albumArtworks.length) )
{
if( flag == 0 )
i.attr('class','fa fa-play');
else
{
albumArt.removeClass('buffering');
i.attr('class','fa fa-pause');
}
seekBar.width(0);
trackTime.removeClass('active');
tProgress.text('00:00');
tTime.text('00:00');
currAlbum = albums[currIndex];
currTrackName = trackNames[currIndex];
currArtwork = albumArtworks[currIndex];
audio.src = trackUrl[currIndex];
nTime = 0;
bTime = new Date();
bTime = bTime.getTime();
if(flag != 0)
{
audio.play();
playerTrack.addClass('active');
albumArt.addClass('active');
clearInterval(buffInterval);
checkBuffering();
}
albumName.text(currAlbum);
trackName.text(currTrackName);
albumArt.find('img.active').removeClass('active');
$('#'+currArtwork).addClass('active');
bgArtworkUrl = $('#'+currArtwork).attr('src');
bgArtwork.css({'background-image':'url('+bgArtworkUrl+')'});
}
else
{
if( flag == 0 || flag == 1 )
--currIndex;
else
++currIndex;
}
}
function initPlayer()
{
audio = new Audio();
selectTrack(0);
audio.loop = false;
playPauseButton.on('click',playPause);
sArea.mousemove(function(event){ showHover(event); });
sArea.mouseout(hideHover);
sArea.on('click',playFromClickedPos);
$(audio).on('timeupdate',updateCurrTime);
playPreviousTrackButton.on('click',function(){ selectTrack(-1);} );
playNextTrackButton.on('click',function(){ selectTrack(1);});
}
initPlayer();
});```
解决方案
好吧,终于有答案了。它只有两个音频一个接一个地播放,您可以继续添加更多。代码如下。
<!DOCTYPE html>
<html>
<body>
<audio id = "id" onended = "myFunction()">
<source src = "https://www.zapsplat.com/wp-content/uploads/2015/sound-effects-41945/zapsplat_bells_church_bell_ring_12_ext_med_close_43634.mp3?_=1">
</audio>
<audio id = "audio">
<source src = "https://www.zapsplat.com/wp-content/uploads/2015/sound-effects-audeption/audeption_church_bell_with_street_and_some_birds_010.mp3?_=2">
</audio>
<p>Click the buttons to play or pause the audio.</p>
<button onclick="playAudio()" type="button">Play Audio</button>
<script>
var x = document.getElementById("id");
var z = document.getElementById("audio")
function playAudio() {
x.play();
}
function myFunction() {
z.play();
}
</script>
</body>
</html>
很抱歉音频有多长。
推荐阅读
- npm - 为什么我得到这个错误 webpack 编译时出现 1 个错误?
- python - 如何使用 Python 缓存带有静态资产的反应页面?
- use-effect - React UseEffect 依赖于上下文不会立即更新组件
- regex - 需要正则表达式才能从此输出中获取版本
- c# - 由于代理 SELF_SIGNED_CERT_IN_CHAIN,linux azure devops 代理任务无法连接
- python - 初始化 Plotly 的 Scattergeo fig 的不同方法,一种不允许我“update_geos”,另一种我不能添加数据
- reactjs - React Native [ Stacks - Navigation ] 给一个函数导航
- c# - C#如何使泛型方法更清晰
- microsoft-graph-api - Microsoft graph api中基于ccRecipients、bccRecipients、toRecipients的过滤
- javascript - 使用没有 UI 的 Google Maps SDK 解析完整地址