利用js實現的音樂簡易播放器

時間 2019-11-19

原文原文鏈接

<html>

<head>
    <meta charset="utf-8">
    <meta name="author" content="dongfeng">
    <title></title>
    <script>
    var musics = [
    '1.mp3',
    '2.mp3',
    '3.mp3',
    '4.mp3',
    '2.mp3'
];
//定義正在播放的音頻的索引
var index = 0;
//記錄順序和隨機的變量
var playType;
window.onload = function() {
    var typeSel = document.getElementById('typeSel');
    //當用戶更改下拉菜單選項時，改變播放方式
    typeSel.onchange = function() {
        console.log(typeSel.value)
        window.playType = typeSel.value;
    }
    var player = document.getElementById('player');
    //頁面加載時播放的第一個文件
    player.src = musics[index];
    player.addEventListener('ended',myFunction) function myFunction() {
        
        if(playType == 'random') {
            index = Math.floor(Math.random() * musics.length);
            console.log(index)
            player.src = musics[index];
        } else {
            //播放下一個音頻
            player.src = musics[++index % musics.length]
        }
        player.play();
    }
}
    </script>

    <style>
        #typeSel {
    margin-bottom: 30px;
    width: 160px;
}</style>
</head>

<body>
<h2>音樂播放器</h2>
<select id="typeSel">
    <option value="sequence">順序播放</option>
    <option value="random">隨機播放</option>
</select><br />
<audio id="player" controls>你的瀏覽器不支持audio元素</audio>


</body>

</html>

audio中的onended方法不知怎麼只有用事件監聽的方法纔有用，<element onended="myScript">和object.onended=function(){myScript};都不起做用，只有object.addEventListener("ended", myScript);才起做用html

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。