H5页面audio多声音解决方法

移动端H5带背景音乐，之后如又有其他声音声音产生的冲突，解决方法。

在线demo：http://www.hui12.com/nbin/csdn/sound/demo.html

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Audio</title><script src="jquery-2.1.0.js"></script></head><body><h2>播放暂停->背景音乐，sound1-sound3模拟页面其他音乐</h2><button class="play">播放</button><button class="stop">暂停</button><button class="sound1">sound1</button><button class="sound2">sound2</button><button class="sound3">sound3</button><script type="text/javascript">$(document).ready(function(){var $play = $('.play'),$stop = $('.stop'),$sound1 = $('.sound1'),$sound2 = $('.sound2'),$sound3 = $('.sound3');var sound = (function(){var s0 = new Audio('s0.mp3'),s1 = new Audio('s1.mp3'),s2 = new Audio('s2.mp3'),s3 = new Audio('s3.mp3');var isPlay = true;s0.play();s0.loop = true;function stopAll(){s0.pause();s1.pause();s2.pause();s3.pause();};return {play: function(){isPlay = true;stopAll();s0.play();},stop: function(){isPlay = false;s0.pause()},sound1: function(){stopAll();s1.play();s1.onended = function(){isPlay && s0.play();};},sound2: function(){stopAll();s2.play();s2.onended = function(){isPlay && s0.play();};},sound3: function(){stopAll();s3.play();s3.onended = function(){isPlay && s0.play();};}};})();$play.on('click', function(){sound.play();});$stop.on('click', function(){sound.stop();});$sound1.on('click', function(){sound.sound1();});$sound2.on('click', function(){sound.sound2();});$sound3.on('click', function(){sound.sound3();});/** 资源预加载*/fnLoad();function fnLoad(){var tmp = [$play, $stop, $sound1, $sound2, $sound3];var soundSrc = ['s0.mp3','s1.mp3','s2.mp3','s3.mp3'];var j = 0;var z = 0;for( var i=0; i<tmp.length; i++ ){tmp[i].hide();};fnLoad2();function fnLoad2(){var src = soundSrc[j];if( !src ) return;j++;var tmpA = new Audio(src);tmpA.onloadeddata = function(){isLoadAll();fnLoad2();};tmpA.onerror = function(){isLoadAll();fnLoad2();};};function isLoadAll(){z++;if( z == soundSrc.length ){for( var i=0; i<tmp.length; i++ ){tmp[i].show();};};};};});</script></body>
</html>

w3c说明：

http://www.w3school.com.cn/jsref/dom_obj_audio.asp

H5页面audio多声音解决方法相关推荐

h5 android 滚动条卡顿,h5页面滑动卡顿解决方法
解决方式: 给滚动的元素加样式:-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling(允许独立的滚动区域和触摸回弹) 如果值为au ...
计算机系统重新之后为啥没声音,电脑重装系统后没声音怎么办电脑重装系统后没声音解决方法...
许多朋友在电脑重装系统之后,时常会出现电脑没声音的问题,重装系统后电脑没有声音这样的问题困扰了不少新手.因为装系统之前明明还有声音呀,其实系统没有声音原因可能是多方面的,造成的原因不同,解决方法也不同 ...
窗口缩放导致页面排版错乱的解决方法
窗口缩放导致页面排版错乱的解决方法参考文章: (1)窗口缩放导致页面排版错乱的解决方法 (2)https://www.cnblogs.com/mingdao/p/11115613.html 备忘一下 ...
Thinkphp5.1允许uni-app的H5跨域请求接口解决方法
Thinkphp5.1允许uni-app的H5跨域请求接口解决方法参考文章: (1)Thinkphp5.1允许uni-app的H5跨域请求接口解决方法 (2)https://www.cnblogs. ...
win2003配置apache2.2下，php页面出现乱码的解决方法
win2003配置apache2.2下,php页面出现乱码的解决方法找到apache安装目录下的 httpd.conf 文件修改或增加这一句 AddDefaultCharset GB2312 ps ...
服务器网站管理页面打不开解决方法
服务器网站管理页面打不开解决方法点击右边的防火墙点击添加规则打开80端口,协议选TCP就行了大功告成!
移动端和PC端弹出遮罩层后,页面禁止滚动的解决方法及探究
移动端和PC端弹出遮罩层后,页面禁止滚动的解决方法及探究参考文章: (1)移动端和PC端弹出遮罩层后,页面禁止滚动的解决方法及探究 (2)https://www.cnblogs.com/ranyon ...
nginx+php-fpm页面显示空白的解决方法
nginx+php-fpm页面显示空白的解决方法参考文章: (1)nginx+php-fpm页面显示空白的解决方法 (2)https://www.cnblogs.com/mafeng/p/80037 ...
微信H5页面嵌入百度地图---解决手机的webKit定位，ios系统对非https网站不提供支持问题
微信H5页面嵌入百度地图---解决手机的webKit定位,ios系统对非https网站不提供支持问题参考文章: (1)微信H5页面嵌入百度地图---解决手机的webKit定位,ios系统对非http ...

H5页面audio多声音解决方法

H5页面audio多声音解决方法相关推荐

最新文章

热门文章