h5 audio JS控制音乐开关

概述

H5页面，需要加入一个音乐，然后要对音乐进行开、关控制。

首先H5加入音乐的话，需要用到H5的audio标签。

然后为了在页面上做音乐开关的控制，替换了默认的音乐播放器的图片，找了一个漂亮的音乐icon替代。

为了音乐播放过程的美观，需要对音乐icon控制，音乐播放的时候，图片旋转，暂定的时候，图片停止旋转。因此用到Jquery的插件：JqueryRotate。

H5-audio标签

说明

标签定义声音，比如音乐或者其他音频流。是HTML5的新标签。
由于老的浏览器不兼容。因此可以在audio标签之间，放置需要默认显示的内容
例如：

<audio src="/path/test.mp3">
	您的浏览器不支持audio标签
</audio>

属性

示例

<audio src="test.mp3" loop controls autoplay="autoplay" id="audio">
	您的浏览器不支持audio标签
</audio>

该音频，会在该页面打开的时候，直接播放test.mp3文件，并且显示默认的控件。
最终真实效果：

JS-控制播放

关于JS控制音频文件的事件，目前只整理2个

1. play() 播放
2. pause() 暂停（非停止，再次播放，会连续上次的播放节点）

示例

1. js示例代码

<script type="text/javascript">
	var audio = document.getElementById("audio");
	audio.play();	//播放
	audio.pause();	//暂停
</script>

2. jquery示例代码

<script type="text/javascript">
	var audio = $("#audio")[0];
	audio.play();	//播放
	audio.pause();	//暂停
</script>

其他说明：
JS操作获得的是audio对象，因此可以直接操作play、pause
Jquery选择器获取的是jquery对象，0才是对应的audio对象，所以不能直接操作。

JqueryRotate-图片旋转

介绍

JqueryRotate，可以实现旋转效果的jquery插件。支持所有主流浏览器。
可以在其 官网 获取下载资源以及使用案例。

使用示例

<img src="./yinyue.png" alt="" id="img">
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.js"></script>
<script src="./jQueryRotate.js"></script>
<script>
	// 直接旋转45度（向右旋转）
	$('#img').rotate(45);
	$('#img').rotate({angle:45});

	// 鼠标事件控制：获取鼠标右转180度，鼠标离开回归原始
	$('#img').rotate({ 
	    bind : {
	        mouseover : function(){
	            $(this).rotate({animateTo: 180});
	        }, mouseout : function(){
	            $(this).rotate({animateTo: 0});
	        }
	    }
	});

	// 不停的旋转
	var angle = 0;
	setInterval(function(){
	    angle +=3;
	    $('#img').rotate(angle);
	}, 15);

	// 间隔旋转，每次旋转都会有停顿
	var rotation = function (){
	    $('#img').rotate({
	        angle: 0, 
	        animateTo: 360, 
	        callback: rotation
	    });
	}
	rotation();

	// 不停旋转，中间没有卡顿
	var rotation2 = function(){
	    $('#img').rotate({
	        angle: 0, 
	        animateTo: 360, 
	        callback: rotation2,
	        easing: function(x,t,b,c,d){
	            return c*(t/d)+b;
	        }
	    });
	}
	rotation2();

	// 点击旋转
	$('#img').rotate({ 
	    bind: {
	        click: function(){
	            $(this).rotate({
	                angle: 0,
	                animateTo: 360,
	                easing: $.easing.easeInOutExpo
	            });
	        }
	    }
	});


</script>

参数说明

演示虽然使用的是图片，但 jqueryrotate 并不只是能运用在图片上，其他元素如 div 等也可以使用。

最终效果

思路

1. 用audio标签，完成音频文件的引用，设置标签循环播放，不自动播放（让JS控制播放）
2. 美化：将audio标签设置为隐藏style="display:none;"，用其他图片代替，用图片的JS时间，控制播放、暂停
3. 美化：用jqueryrotate插件美化图片的旋转效果，图片旋转随着音乐的播放和暂停来旋转和不旋转

源码

<img src="yinyue.svg" alt="" class="rotate" id="music_img">
<audio id="media" src="test.mp3" loop="loop"style="display:none">
	您的浏览器不支持audio标签
</audio>

<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.js"></script>
<script src="jQueryRotate.js"></script>
<script type="text/javascript">
	$(function () {
		if ($("#music_img").length > 0) {
			var Media = $("#media")[0];
			if ($("#music_img").hasClass('rotate')) {
				var angle = 0;
				setInterval(function(){
					angle +=3;
					$('.rotate').rotate(angle);
				}, 15);
				Media.play();
			}
			$("#music_img").on("click", function () {
				if ($(this).hasClass('rotate')) {
					Media.pause();
					$(this).addClass('off').removeClass('rotate');
				} else {
					Media.play();
					$(this).addClass('rotate').removeClass('off');
				}
			});
		}
	});
</script>

最终效果

在静态图片上，显示不出旋转效果，其实图片是旋转的
点击旋转中的图标，图标停止旋转，音乐暂停
点击暂停的图标，图标开始旋转，音乐继续

主要参考：
http://www.tuicool.com/articles/ZfU7ju
http://www.dowebok.com/72.html
http://www.w3school.com.cn/tags/tag_audio.asp