音频自动播放下一首歌曲时,上一首完成
audio auto play next song when previous is finished
我想创建一个音频背景播放器,用户只能点击图像播放或停止播放。我有麻烦创建或重写现有的代码,使它的播放列表,自动播放下一首歌曲时,以前的完成。我想用普通js来做。以下是我到目前为止所做的:
https://jsfiddle.net/rockarou/ad8Lkkrj/
var imageTracker = 'playImage';
swapImage = function() {
var image = document.getElementById('swapImage');
if (imageTracker == 'playImage') {
image.src = 'http://findicons.com/files/icons/129/soft_scraps/256/button_pause_01.png';
imageTracker = 'stopImage';
} else {
image.src = 'http://findicons.com/files/icons/129/soft_scraps/256/button_play_01.png';
imageTracker = 'playImage';
}
};
var musicTracker = 'noMusic';
audioStatus = function() {
var music = document.getElementById('natureSounds');
if (musicTracker == 'noMusic') {
music.play();
musicTracker = 'playMusic';
} else {
music.pause();
musicTracker = 'noMusic';
}
};
触发下一首歌曲的技巧:
music.addEventListener('ended',function(){
//play next song
});
如何在同一音频标签上播放另一首歌曲:
music.pause();
music.src = "new url";
music.load();
music.play();
现在这是一个很酷的html5播放列表的例子,你可以加载每首歌的时间,以防一些客户端(移动)将不高兴,当你消耗的流量,在下一个例子中,所有的音频都是在同一时间加载,有一个平稳的过渡从一首歌到另一首歌。加载歌曲:
//playing flag
var musicTracker = 'noMusic';
//playlist audios
var audios = [];
$(".song").each(function(){
var load = new Audio($(this).attr("url"));
load.load();
load.addEventListener('ended',function(){
forward();
});
audios.push(load);
});
//active track
var activeTrack = 0;
高亮显示巫婆的歌正在播放,用一点jquery,是的,情况是的我很懒,懒:
var showPlaying = function()
{
var src = audios[activeTrack].src;
$(".song").removeClass("playing");
$("div[url='" + src + "']").addClass("playing");
};
这里小提琴
注意:如果声音不播放,手动检查音频url是否可访问
[这里有一个非香草的解决方案。]我的歌单里有四首歌,它们的名字分别是0.3 mp3, 1 mp3, 2 mp3和3 mp3。
<html>
<head><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script></head>
<body>
<audio id="player" autoplay controls><source src="0.mp3" type="audio/mp3"></audio>
</body>
<script>
var x = 0;
var music = document.getElementById("player");
$("#player").bind("ended", function(){
x=x+1;
music.src = x%4 + ".mp3";
music.load();
music.play();
});
</script>
</html>
播放列表无限重复。
香草Javascript变体:
const audioArray = document.getElementsByClassName('songs'); //Get a list of all songs
let i = 0; //Initiate current Index
const player = document.getElementById('player'); //get the player
player.src = audioArray[i].getAttribute('data-url'); //set first Song to play
player.addEventListener('ended',function(){ //when a song finished playing
i++; //increase index
if (i < audioArray.length) { //If current index is smaller than count of songs
player.src = audioArray[i].getAttribute('data-url'); //set next song
return; // stop further processing of this function for now
}
// current index is greater than count of songs
i = 0; // therefore we reset the current index to the first available song
player.src = audioArray[i].getAttribute('data-url'); // and set it to be played
});
在这个例子中,你没有为audioplayers的源标签设置一个初始的src,而是用一个带有data-url属性的类'song'-items列表,其中包含了音轨的url/路径。
我添加了注释来了解这段代码做什么以及为什么做它所做的。当然,它可以更好,但它是一个快速抛出的代码;)
相关文章:
- Last.fm API发送2个曲目时,我要求一个,如果我正在听一首歌
- HTML5<音频>:点击下一首歌曲时停止加载/缓冲
- 制作一个html5音频播放列表,自动播放一首又一首歌曲
- 带有jQuery的音频HTML5播放下一首曲目
- 对文本区域段落的每一首行应用缩进
- 在 html 页面上一次播放一个视频
- 使用 Javascript/jQuery 一次播放一个 HTML 音频文件
- 获取 timeOut() 以每秒从数组中播放一首歌曲
- 我想在歌曲结束后在默认音频播放器中播放一首流行音乐,任何人都可以帮我编写代码
- 音频播放器-一次只播放一首曲目,不起作用
- 通过Spotify App API从队列中获取下一首曲目
- AngularJS Cordova Media不;不要总是播放下一首歌
- 在我的网页上嵌入不止一首歌曲
- 一次播放多个幻灯片
- 如何通过Soundcloud API重复一首歌
- 音频自动播放下一首歌曲时,上一首完成
- SoundManager 2一次播放相同的声音
- Soundcloud Flash小部件,试图在页面上播放下一首歌曲
- 让Adobe Edge-animation一次播放一次仅当用户查看动画所在的部分页面时
- Web Audio API附加/连接不同的audiobuffer并将它们作为一首歌曲播放