javascript - 如何实现一个可以反复触发的audio播放器?
阿神
阿神 2017-04-10 17:54:28
[JavaScript讨论组]

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

首先我用了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做的。。。无奈

阿神
阿神

闭关修行中......

全部回复(2)
PHP中文网

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

PHP中文网

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

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号