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

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

首先我用了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做的。。。无奈?。
大神助我!!

阅读 7.4k
2 个回答

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

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