做一项目，用到“叫号功能”，网页上有一“叫号”按钮，点击后就读数据库中存的号码，如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>

JS控制音频顺序播放的更多相关文章

  1. JS控制flash的播放

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...

  2. JS控制视频的播放

    在用js定时器控制视频时, html部分: <video id="video_1"> <source id="source_1" src=&q ...

  3. 31.JS实现控制HTML5背景音乐播放暂停

    实现控制网站背景音乐的播放暂停在html5中是非常容易和简单的,仅仅几行代码即可实现.首先在网页中嵌入背景音乐,html5代码为: <script src="http://wuover ...

  4. HTML5使用JavaScript控制＜audio>音频的播放

    1.播放音乐最简单的样例 <audio controls> <source src="horse.mp3" type="audio/mpeg" ...

  5. JS实现控制HTML5背景音乐播放暂停

    首先在网页中嵌入背景音乐,html5代码为: <script src="http://wuover.qiniudn.com/jquery.js"></script ...

  6. JAVA按顺序播放多个wav音频

    用Java按顺序播放多个音频部件,不是同时播放.代码如下: List<String> files = new ArrayList<String>(); files.add(&q ...

  7. js控制swf播放

    <html> <head> <title>用js代码控制flash的播放</title> <meta charset="utf-8&qu ...

  8. iOS 9音频应用播放音频之控制播放速度

    iOS 9音频应用播放音频之控制播放速度 iOS 9音频控制播放速度 iOS9音频文件在播放时是以一定的速度进行的.这个速度是可以进行更改的,从而实现iOS9音频文件的快速播放和慢速播放功能.要实现i ...

  9. iOS 9音频应用播放音频之播放控制暂停停止前进后退的设置

    iOS 9音频应用播放音频之播放控制暂停停止前进后退的设置 ios9音频应用播放控制 在“iOS 9音频应用播放音频之ios9音频基本功能”一文可以看到AVAudioPlayer类有很多的属性以及方法 ...

随机推荐

  1. PHP 数组中取出随机取出指定数量子值集

    #关键:array_rand() 函数返回数组中的随机键名,或者如果您规定函数返回不只一个键名,则返回包含随机键名的数组.#思路:先使用array_rand()随机取出所需数量键名,然后将这些键名指向 ...

  2. 【Java】 剑指offer(15) 数值的整数次方

    本文参考自<剑指offer>一书,代码采用Java语言. 更多:<剑指Offer>Java实现合集   题目 实现函数double Power(double base, int ...

  3. 浅谈RPC调用

    RPC英文全称remote procedure call 翻译成中文的意思就是远程过程调用.RPC的出现其实主要是为了解决分布式系统间的通信透明性的问题. 那什么是分布式系统的通信透明性问题?这个问题 ...

  4. web漏洞扫描工具AWVS使用

    AWVS AWVS简介:Acunetix Web Vulnerability Scanner(简称AWVS)是一款知名的网络漏洞扫描工具,它通过网络爬虫测试你的网站安全,检测流行安全漏洞,如交叉站点脚 ...

  5. window版chrome 57.0.2970.0 (64-bit)滚动条的BUG

    有一个元素div,它有一个子元素ul,给div添加一个:hover样式{color: red},挡鼠标hover div时,字体变红. 当鼠标hover div时,ul字体变红,鼠标hover ul的 ...

  6. 【*】CAS 是什么,Java8是如何优化 CAS 的

    文章结构 前言 想要读懂 Java 中的并发包,就是要先读懂 CAS 机制,因为 CAS 是并发包的底层实现原理.本文主要讨论  CAS 是如何保证操作的原子性的  Java8 对 CAS 进行了哪些 ...

  7. Python + Selenium + AutoIt 模拟键盘实现另存为、上传、下载操作详解

    前言 在web页面中,可以使用selenium的定位方式来识别元素,从而来实现页面中的自动化,但对于页面中弹出的文件选择框,selenium就实现不了了,所以就需引用AutoIt工具来实现. Auto ...

  8. java中thread的start()和run()的区别

    1.start()方法来启动线程,真正实现了多线程运行,这时无需等待run方法体代码执行完毕而直接继续执行下面的代码: 通过调用Thread类的start()方法来启动一个线程, 这时此线程是处于就绪 ...

  9. Nutch源码阅读进程3

    走了一遍Inject和Generate,基本了解了nutch在执行爬取前的一些前期预热工作,包括url的过滤.规则化.分值计算以及其与mapreduce的联系紧密性等,自我感觉nutch的整个流程是很 ...

  10. Xdebug、XHProf 、OneAPM 和 SocketLog

    DevOps 生活变得美好的神器.分别是 Xdebug.XHProf .OneAPM 和 SocketLog 方法很简单,从 Xdebug 下载最新版的源代码. wget 解压: tar –zxvf  ...