如何仅在触发播放按钮时让音乐自动播放?

我正在尝试在我的网站上实现一个音频栏,它会从歌曲列表中随机选择要播放的歌曲。音乐应该开始,但只有在按下播放按钮时才开始,当一首歌曲结束时,自动播放下一首歌曲。


下面的代码工作正常,除了前面提到的,音乐在没有按下播放按钮的情况下自行播放。有谁知道如何解决这个问题?


我尝试设置player.autoplay=true;为,false但下一首歌曲不会自动播放。


<audio id="audioplayer" controls> <!-- Remove the "Controls" Attribute if you don't want the visual controls -->

</audio>


<script>

    var lastSong = null;

    var selection = null;

    var playlist = ["sounds/0.mp3", "sounds/1.mp3", "sounds/2.mp3"]; // List of Songs

    var player = document.getElementById("audioplayer"); // Get Audio Element

    player.autoplay=true;

    player.addEventListener("ended", selectRandom); // Run function when song ends


    function selectRandom(){

        while(selection == lastSong){ // Repeat until different song is selected

            selection = Math.floor(Math.random() * playlist.length);

        }

        lastSong = selection; // Remember last song

        player.src = playlist[selection]; // Tell HTML the location of the new Song


    }


    selectRandom(); // Select initial song

    player.play(); // Start Song

</script>


函数式编程
浏览 177回答 2
2回答

慕勒3428872

你有没有试过删除 player.play();

慕容森

创建一个按钮并添加一个onclick属性,移动selectRandom() 到一个按钮onclick函数,如下所示:var player = document.getElementById("audioplayer");var lastSong = null;var selection = null;var playlist = ["https://www.soundjay.com/button/sounds/beep-07.mp3", "https://www.soundjay.com/button/sounds/button-2.mp3", "https://www.soundjay.com/button/sounds/button-3.mp3"]; // List of Songsfunction start() {&nbsp; &nbsp;player.play();&nbsp; &nbsp;player.addEventListener("ended", selectRandom);&nbsp; &nbsp;&nbsp; &nbsp; function selectRandom(){&nbsp; &nbsp; &nbsp; &nbsp; while(selection == lastSong){ // Repeat until different song is selected&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; selection = Math.floor(Math.random() * playlist.length);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; lastSong = selection; // Remember last song&nbsp; &nbsp; &nbsp; &nbsp; player.src = playlist[selection]; // Tell HTML the location of the new Song&nbsp; &nbsp; }&nbsp; &nbsp; player.autoplay=true;&nbsp; &nbsp; selectRandom();}<audio id="audioplayer" controls ></audio><button onclick="start()"> Play </button>
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript