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

发布于 2022-09-01 20:49:53 字数 794 浏览 14 评论 0

<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的重复加载，没点一次就从服务器加载一次音频文件，在网速不够的情况下延迟特别明显。。
百度了一圈都没发现有人问到这个问题。。。
问一下各位，能不能克服文件重复加载的问题，或者换个方法实现声音的叠加？

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

情何以堪。 2022-09-08 20:49:53

感觉跟“收藏”功能的快速点击类似，你可以查看下这个技术：JS 函数节流和函数去抖。
http://www.cnblogs.com/fsjohnhuang/p/4147810.html

回复收藏 0

梦太阳 2022-09-08 20:49:53

我感觉问题在与单个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要重叠播放一个还挺大的音频？？？我感觉十几二十个音频同时拨个十几分钟用户受不了吧。。

回复收藏 0

~没有更多了~