H5页面audio多声音解决方法

最新推荐文章于 2023-01-10 18:41:44 发布

nbin斌

最新推荐文章于 2023-01-10 18:41:44 发布

阅读量8.5k

点赞数 1

文章标签： html5 audio js audio多声音 audio对象

本文链接：https://blog.csdn.net/nbin2008/article/details/50176079

版权

移动端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>