JS控制音訊順序播放

牛腩發表於2018-09-06
JS音訊

做一專案，用到“叫號功能”，網頁上有一“叫號”按鈕，點選後就讀資料庫中存的號碼，如123號， 然後就發聲音出來，

思路是網上下載0123456789的叫號聲音，然後按鈕點選事件裡就在JS裡寫用那個HTML5的video來播放聲音就行了，順序播放聲音的話就得用到Setinterval隔一段時間來播放聲音的，

網上搜尋了一下，終於做出個簡單的示例了：

上面的四個按鈕分別播放4種聲音

下面的在文字框裡輸入數字後，再點播放，會按順序來進行播放的。

原始碼下載：http://image.niunan.net/H5%E9%9F%B3%E9%A2%91%E6%92%AD%E6%94%BE%E7%A4%BA%E4%BE%8B.zip


下面的程式碼：

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>js播放音訊測試</title>
</head>
<body>
    <div>
        <button type="button" onclick="bo1()">播放1</button>
        <button type="button" onclick="bo2()">播放2</button>
        <button type="button" onclick="bo3()">播放3</button>
        <button type="button" onclick="bo4()">播放4</button>
    </div>
    <div>
        只能輸入1，2，3，4 這幾個數字的組合：
        <input placeholder="如:4213" type="text" id="txt" />
        <input type="button" value="播放" onclick="bofang()" />
    </div>
    <script>
        var timeoutindex;
        var index=0; 
        var arr; //分隔出來的字元陣列
        function bo1(){
            console.log("進入bo1");
           var  audio=new Audio("1.mp3");//路徑
                audio.play(); 
        }
        function bo2(){
            console.log("進入bo2");
           var  audio=new Audio("2.mp3");//路徑
                audio.play(); 
        }
        function bo3(){
            console.log("進入bo3");
           var  audio=new Audio("3.mp3");//路徑
                audio.play(); 
        }
        function bo4(){
            console.log("進入bo4");
           var  audio=new Audio("4.mp3");//路徑
                audio.play();
        }
        function bofang(){
            var str = document.getElementById('txt').value;
             arr = str.split(""); 
           timeoutindex=  setInterval("bobo()",1000); 
        }
        function bobo(){
            eval("bo"+arr[index]+"()"); 
            index++;
            if(index>=arr.length){
                index=0;
                clearInterval(timeoutindex);
            }

        }
    </script>
</body>
</html>

相關文章