JS控制音频顺序播放

简介:

做一项目,用到“叫号功能”,网页上有一“叫号”按钮,点击后就读数据库中存的号码,如123号, 然后就发声音出来,

思路是网上下载0123456789的叫号声音,然后按钮点击事件里就在JS里写用那个HTML5的video来播放声音就行了,顺序播放声音的话就得用到Setinterval隔一段时间来播放声音的,

网上搜索了一下,终于做出个简单的示例了:

jiaohao.png

上面的四个按钮分别播放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>
目录
相关文章
|
7天前
|
JavaScript 前端开发
js实现点击音频实现播放功能
js实现点击音频实现播放功能
|
1月前
|
Web App开发 前端开发 JavaScript
编程笔记 html5&css&js 030 HTML音频
编程笔记 html5&css&js 030 HTML音频
|
7月前
|
JavaScript
js监听audio播放完毕-重置音频
js监听audio播放完毕-重置音频
|
7月前
|
Web App开发 JavaScript
JS获取音频的总时长,解决Audio元素duration为NaN || Infinity 问题
JS获取音频的总时长,解决Audio元素duration为NaN || Infinity 问题
|
9月前
|
移动开发 前端开发 JavaScript
在 JavaScript 中播放音频文件
在 JavaScript 中播放音频文件
368 0
|
9月前
|
开发框架 JavaScript 前端开发
Javascript实现视频文件播放功能
Javascript实现视频文件播放功能
124 0
|
JavaScript 前端开发 视频直播
利用Docker挂载Nginx-rtmp(服务器直播流分发)+FFmpeg(推流)+Vue.js结合Video.js(播放器流播放)来实现实时网络直播
众所周知,在视频直播领域,有不同的商家提供各种的商业解决方案,其中比较靠谱的服务商有阿里云直播,腾讯云直播,以及又拍云和网易云的有偿直播服务,服务包括软硬件设备,摄像机,编码器,流媒体服务器等。但是其高昂的费用以及较高的准入门槛让许多个人和小型企业望而却步,本文要讲解的是如何使用nginx-rtmp搭建直播服务器,配合FFmpeg推流,在网页端vue.js作为载体利用video.js作为流播放器,打造一套可用的在线视频直播方案。
利用Docker挂载Nginx-rtmp(服务器直播流分发)+FFmpeg(推流)+Vue.js结合Video.js(播放器流播放)来实现实时网络直播
|
JavaScript 前端开发
JavaScript - PC 端通过纯 js 播放音频文件(播放提示音)
有时候,我们可能有这样一个需求,当到达条件时,网页会播放一个提示音告知用户。
348 0
JavaScript - PC 端通过纯 js 播放音频文件(播放提示音)
|
移动开发 JavaScript Android开发
通过howler.js实现在Android下的微信浏览器自动播放音频
通过howler.js实现在Android下的微信浏览器自动播放音频
399 0
通过howler.js实现在Android下的微信浏览器自动播放音频
|
移动开发 JavaScript
JS指定音频audio在某个时间点进行播放,获取当前音频audio的长度,音频时长格式转化
JS指定音频audio在某个时间点进行播放,获取当前音频audio的长度,音频时长格式转化
647 0
JS指定音频audio在某个时间点进行播放,获取当前音频audio的长度,音频时长格式转化