移动端坑爹的Audio

最新推荐文章于 2023-05-19 15:48:59 发布

pvfhv

最新推荐文章于 2023-05-19 15:48:59 发布

阅读量1.9k

点赞数

分类专栏： HTML5 文章标签： Audio

本文链接：https://blog.csdn.net/pvfhv/article/details/6190619

版权

HTML5 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

最近在开发一些移动端的小游戏，其中有一打开画面就直接播放单词的场景，看起来再普通不过，现在问题来了，移动端不支持无用户交互的音频自动播放！！！

如何解决呢？？

折腾了两天，才发现，必须让用户触碰一下屏幕，从而间接地实现用户按下“播放”按钮的情况！！！

不知道我的描述是否清楚。

研究结果表明，在所有自动播放音频前让用户确定一下开始，然后用户点击一下屏幕，这样音频就可以开始播放了。

那么如何切换其它音频呢，这就非常地容易了，只要修改音频的src就可切换不同的音频了！！

以下是简单的一个小demo:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<style type="text/css">
			div.btn {
				text-align: center;
				width: 100px;
				height: 50px;
				line-height: 50px;
				border: 1px solid red;
			}
		</style>
	</head>

	<body>
		<div class="btn">播放音乐！</div>
		<script src="jquery-2.1.1.min.js"></script>
		<script type="text/javascript">
			var music = null;

			function toggleSound() {
				music = new Audio();
				music.src = 'over.mp3';
				music.play();
				setInterval(function() {
					music.play();
				}, 2000);
			}
			$('.btn').on('touchend', toggleSound);
		</script>
	</body>

</html>