最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

html - Playlist with <audio> JavaScript - Stack Overflow

programmeradmin1浏览0评论

I'm creating a personal small website and I want to play some songs on it. What I've tried to do is the following:

<script type="text/javascript">

var i=1;
var nextSong= "";
var audioPlayer = document.getElementById('audio');
audioPlayer.onended = function(){
    i++
    nextSong = "Music/"+i+".mp3";
    audioPlayer.src = nextSong;
    audioPLayer.load();
    audioPlayer.play();
    if(i == 37) // this is the end of the songs.
    {
        i = 1;
    }
    
}
</script>
<audio id="audio"  src="Music/1.mp3"controls="controls" autoplay="autoplay"   align=""> </audio>

However, I can't get this to work. It just plays the first song and doesn't execute the JS. I've tried alerting the state of i for example but it doesn't do anything.

I'm creating a personal small website and I want to play some songs on it. What I've tried to do is the following:

<script type="text/javascript">

var i=1;
var nextSong= "";
var audioPlayer = document.getElementById('audio');
audioPlayer.onended = function(){
    i++
    nextSong = "Music/"+i+".mp3";
    audioPlayer.src = nextSong;
    audioPLayer.load();
    audioPlayer.play();
    if(i == 37) // this is the end of the songs.
    {
        i = 1;
    }
    
}
</script>
<audio id="audio"  src="Music/1.mp3"controls="controls" autoplay="autoplay"   align=""> </audio>

However, I can't get this to work. It just plays the first song and doesn't execute the JS. I've tried alerting the state of i for example but it doesn't do anything.

Share Improve this question edited May 30, 2022 at 16:39 ggorlen 57.5k8 gold badges111 silver badges154 bronze badges asked Jul 6, 2013 at 20:10 HardCodeStudsHardCodeStuds 5392 gold badges11 silver badges29 bronze badges 1
  • please post any relevant message you see in the javascript console. – Saturnix Commented Jul 6, 2013 at 20:13
Add a ment  | 

3 Answers 3

Reset to default 5

Try this:

<script type="text/javascript">

var i=1;
var nextSong= "";
function setup() {
    document.getElementById('audio').addEventListener('ended', function(){
        i++;
        nextSong = "Music/"+i+".mp3";
        audioPlayer = document.getElementById('audio');
        audioPlayer.src = nextSong;
        audioPLayer.load();
        audioPlayer.play();
        if(i == 37) // this is the end of the songs.
        {
            i = 1;
        }
        }, false);
}
</script>
<body onLoad="setup();">
<audio id="audio"  src="Music/1.mp3"controls="controls" autoplay="autoplay"   align=""> </audio>
</body>

Amendment needed on this answer. You need to also identify the audio player, otherwise this won't work...

<script type="text/javascript">

function setup() {
    var i=1;
    var nextSong= "";
    audioPlayer = document.getElementById('audio');
    document.getElementById('audio').addEventListener('ended', function(){
        i=i+1;
        nextSong = "m"+i+".mp3";
        audioPlayer.src = nextSong;
        audioPlayer.load();
        audioPlayer.play();     
        }, false);

}
</script>
<body onLoad="setup();">
<audio id="audio"  src="m1.mp3" controls="controls" autoplay="autoplay" align=""> </audio>
</body>
var i=1; var nextSong= ""; function setup() { document.getElementById('audio').addEventListener('ended', function(){ i++; nextSong = "Music/"+i+".mp3"; audioPlayer = document.getElementById('audio'); audioPlayer.src = nextSong; audioPLayer.load(); audioPlayer.play(); if(i == 37) // this is the end of the songs. { i = 1; } }, false); }
发布评论

评论列表(0)

  1. 暂无评论