问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

web前端，快速点击时的音效叠加问题

头像
死胖子
    691128
    <html !doctype>
<head>
<title>声音叠加播放</title>
</head>
<body>
<audio id="audio" src="音频地址" style="display:none"></audio>
<input id="btn"   type="button" value="点击触发音效" />
<script>
    var audio = document.getElementById('audio'),
        btn   = document.getElementById('btn');

    btn.onclick = function() {
        // 通过clone方法实现多个声音同时响起
        audio.cloneNode().play();
    };
</script>
</body>
</html>

    为方便大伙儿测试，我把到代码写了一份，替换上面的"音频地址"即可。
    问题是这样，之前某个项目需要做点击音效，如果用audio.play(), 同一时间内只能是一个audio响起，不能适应点击频率高的情况。所以我这里用了audio.cloneNode().play()。这确实能实现音效的叠加，但后面发现cloneNode()会造成audio的重复加载，没点一次就从服务器加载一次音频文件，在网速不够的情况下延迟特别明显。。
    百度了一圈都没发现有人问到这个问题。。。
    问一下各位，能不能克服文件重复加载的问题，或者换个方法实现声音的叠加？

    htmjavascript
    阅读 8.3k
    2 个回答
    得票最新
    头像
    imingyu
      816513
      头像
      x31494jp
        2212

        我感觉问题在与单个audio和video貌似没有一种可以重叠（不是重复）播放的机制，楼主这种需求真心没有遇到过。就重叠播放的问题我想了半天感觉只能复制audio来实现了。（要是audio和video真的能够实现重叠播放的话麻烦楼主也告诉我一声啊！！！！）。

        另外一个方面就是楼主复制audio后。他们的src都是指向服务器上的某个文件，于是在每个audio初始化的时候都会去重复加载这一个文件。这个问题是可以优化的。具体实现就是先不设置src，第一次的音频文件请求过来用然后用blob存下来，在创建一个本地URL并把这个URL赋值给audio的src，然后之后所有复制的audio的src都指向这个笨的的URL就行。

        <html !doctype>
<head>
<title>声音叠加播放</title>
<meta charset='utf-8'>
</head>
<body>
<audio id="audio"  style="display:none"></audio>
<input id="btn"   type="button" value="点击触发音效" />
<script>
var btn = document.getElementById("btn");
var audio = document.getElementById("audio");
btn.onclick = function(){
    if(!audio.src){
        var xhr = new XMLHttpRequest();
            xhr.open('GET',"./119.MP3");
            xhr.responseType = "blob";
            xhr.send();
            xhr.onreadystatechange = function(){
                if(xhr.readyState === 4 ){
                    var blob = this.response;
                    audio.src = window.URL.createObjectURL(blob);
                    audio.cloneNode().play();
                }
            }
    }else{
        audio.cloneNode().play();
    }
    
}
</script>
</body>

        其实这段代码没有考虑那个音频文件到底有多大，如果有点大的话这TMD想了想好像还挺复杂的。。。。。不过楼主，你们真TMD要重叠播放一个还挺大的音频？？？我感觉十几二十个音频同时拨个十几分钟用户受不了吧。。

        撰写回答
        你尚未登录，登录后可以
        • 和开发者交流问题的细节
        • 关注并接收问题和回答的更新提醒
        • 参与内容的编辑和改进，让解决方法与时俱进
        推荐问题
        宣传栏