如何实现一个可以反复触发的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做的。。。无奈?。
大神助我!!
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
好的吧,实际上是我想多了。浏览器音频连续触发同一个播放源的时候应该是是关闭了上一个音频播放进程,执行当下的音频进程。
因此,只需要再次点击的时候把音频的currentTime设置成0,由于声音的时间很短,就能形成连续触发的效果,但是如果是长音的话,比如一个声音要3秒以上,要形成叠加效果,目前还没考虑到有什么好办法。
我刚刚试了试,发现同一个audio是可以重复播放的
我用zepto写的,用js写的,
你看一下有什么问题