最近需要做一个WEB应用。里面有一个场景是转盘抽奖,想做点声音上去,在转盘转动的时候播放,音频文件很简单,就是“哒”的一声,大小也只有6K,已知HTML5有标签,并且可以通过设置属性loop来实现循环播放

<audio src="https://segmentfault.com/q/1010000000332110/sfx_lottery_spinclick.mp3" autoplay loop></audio>

但是速度明显不够,一秒钟大概能播放5次,怎么样才能让他播放的频次更高呢?配合JS以编程的方式来实现会不会有办法呢,请高手赐教。。。

回答

<audio>的接口里有声音播放速度的接口,但是多浏览器支持没有做过测试,楼主小心使用。

myVid=document.getElementsByTag("audio");myVid.playbackRate=4;//大于1,就是高速播放

当然,如果是声音里面有衰减或空白的部分,不想剪辑声音的话,可以用多个Audio同时循环播放,如下:

var audios=[];for (var i= 0; i < 5; i++ ) { var a = new Audio();
a.src = "" ;//填入你的音频地址
a.preload="auto";
a.loop = true;
audios.push(a) ;
}// 调用下面函数之前需要先确定audio已经完全载入,可以通过audio的readystate接口进行判断。//这里直接就写成立即执行的方式了。(function playSingle(i){ //用递归写的,迭代也可行
if ( i > 0 ) {
audios[i-1].play() ; setTimeout(function(){
playSingle(i-1) ;
},1000);//每隔1000毫秒,额外播放一个音频
}
})(audios.length) ;

最后共五个音频先后循环播放,各延迟1000毫秒。QQ号码出售地图当然可以通过调节毫秒数来达到更好的效果。

我推测你的问题在于比如音频可能有100ms,但你想1000ms内播放100次。所以单纯的遍历是不能解决问题的,而且在极快的情况下,js所需要的时间也会被考虑进去延缓频率。

可以试试多开几个音频,然后延时播放。比如说在10ms时播放第二个音频,20ms播放第三个…90ms播放最后一个,这样在100ms时第一个音频会再次循环,如此就可以达到10ms播放一次的频率。


更多相关文章

  1. 【前端】HTML5 audio ,在chrome中设置currentTime无效
  2. 【前端】新手使用uikit-幻灯片,但是在播放时图片会闪烁,检查了半天
  3. uni-app实现一进入H5页面,背景音乐自动播放
  4. 有关H5中背景音乐的自动播放功能
  5. H.264播放器在视频播放时报错Mixed Content的问题排查与解决
  6. 1. 为翻页按钮添加功能; 2. 当鼠标移出时,图片的每隔2秒的自动播
  7. js 轮播图功能:上下翻页,自动播放----0409
  8. 痞子衡嵌入式:基于恩智浦i.MXRT1060的MP4视频播放器(RT-Mp4Player
  9. 在苹果Mac上如何覆盖现有音频?

随机推荐

  1. 面试题之:颠倒二进制位的实现思路讲解(PHP
  2. 聚合数据短信API服务接口PHP请求示例(附
  3. php怎么调用自建证书的webservice
  4. PHP自动加载机制介绍——spl_autoload_re
  5. 安装及配置eaccelerator-0.9.5加速PHP-5.
  6. php判断从数据库查出的二维数组是否有重
  7. PHP如何为函数执行设置超时
  8. php解析url获取url中的参数值
  9. 简单记录PHP的超全局变量$_SERVER
  10. PHP+Redis 有序集合实现 24 小时排行榜实