zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    Spring系列之访问数据库
    (转载)Java反射机制
    Spring系列之IOC容器
    SpringMVC系列之基本配置
    Java中Comparable和Comparator区别小结
    计算机网络知识点回顾
    Java内部类
    Java接口回调机制
    linux mysql-bin.000001占用磁盘空间过大解决方法
    linux mysql数据库登录密码忘记了怎么办
  • 原文地址:https://www.cnblogs.com/niunan/p/9598025.html
Copyright © 2011-2022 走看看