如何实现一个可以反复触发的audio播放器?

发布于 2022-09-02 11:37:26 字数 677 浏览 23 评论 0

我想实现一个在线弹琴的东西,需要点击或者拨动触发声音。

首先我用了audio标签:

var trig = document.getElementById('trigger');

trig.addEventListener('touchstart',function() {
    document.getElementById('boom').play();
});

但是这样有问题,那就是在audio播放期间,再点击就无效了。

然后没办法只有每次播放的时候就new一个Audio对象。

var trig = document.getElementById('trigger');

trig.addEventListener('touchstart',function() {
    var audio = new Audio();
    audio.src = './boom.mp3';
    audio.play();
});

这样又有问题,每次new一个对象都会加载一次资源,会有很多资源获取请求,而且在没有你缓存的情况下会存在很多的延迟。而且如果没有后台,js本身是做不到资源缓存的,最多存点字符串。。

在网上少了很多在线弹琴的东西,都是用flash做的。。。无奈?。
大神助我!!

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

扫码二维码加入Web技术交流群

发布评论

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

评论(2

无畏 2022-09-09 11:37:26

好的吧,实际上是我想多了。浏览器音频连续触发同一个播放源的时候应该是是关闭了上一个音频播放进程,执行当下的音频进程。
因此,只需要再次点击的时候把音频的currentTime设置成0,由于声音的时间很短,就能形成连续触发的效果,但是如果是长音的话,比如一个声音要3秒以上,要形成叠加效果,目前还没考虑到有什么好办法。

故事未完 2022-09-09 11:37:26

我刚刚试了试,发现同一个audio是可以重复播放的
我用zepto写的用js写的
你看一下有什么问题

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文