html5 音乐 audio

手机做小项目，需要添加音乐，做此笔记，依赖jquery，代码如下：
<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Document</title>

	<style>

	*{ margin:0; padding:0; }

/**

 * 声音元件

 */

.z-hide{ display:none; }

.u-audio { position: absolute; top: 40px; right:20px; width: 132px; height: 73px; z-index: 200; }

.u-audio .btn_audio { width: 100%; padding-top: 29px; height: 44px; border:1px solid #eee; }

.u-audio .btn_audio .audio_open { display: inline-block; height: 44px; line-height: 44px; vertical-align: middle; background-color:#eee; cursor:pointer; position: absolute; bottom: 0; left: 56px; width: 44px; }

.u-audio.z-low { z-index: 1; }

</style>

</head>

<body>

	<!-- 音乐 -->

    <section class='u-audio f-hide' data-src='onlylove.mp3'>

      <p class="btn_audio">

      <strong class='txt_audio z-hide'>关闭</strong>

      <span class='css_sprite01 audio_open'></span>

      </p>

    </section>

	<script src="js/jquery-1.8.2.min.js"></script>

	<script>

	;(function($){

		function vedioFun(){

			this._audioNode = $(".u-audio");

			this._audio = null;

		}

		vedioFun.prototype.audio_init = function(){

			if (this._audioNode.length >0 ){

				var t = {

					loop: !0,

					preload: "auto",

					src: this._audioNode.attr("data-src")

				};

				this._audio = new Audio;

				for (var e in t) t.hasOwnProperty(e) && e in this._audio && (this._audio[e] = t[e]);

				this._audio.load();

			}

		}

		vedioFun.prototype.audio_addEvent = function() {

			var audio = this._audioNode.find(".txt_audio"),

				a = null,

				btn = audio.siblings(".audio_open");

			function t(t, e, n) {

				if(e){

					t.text("打开");

					btn.addClass("js-audio-open");

				}else{

					t.text("关闭");

					btn.removeClass("js-audio-open");

				}

				n && clearTimeout(n),

				t.removeClass("z-move z-hide"),

				n = setTimeout(function() {

					t.addClass("z-move").addClass("z-hide")

				},1e3);

			}

			if (this._audioNode.length > 0) {

				$(this._audio).on("play",function(){

					t(audio, !0, a);

				}),

				$(this._audio).on("pause",function(){

					t(audio, !1, a);

				})

			}

		}

		vedioFun.prototype.media_init = function(){

			var self = this;

			self.audio_init();

			self.audio_addEvent();

			$(window).on("load",function() {

				self._audio.play();

				self._audioNode.find(".btn_audio").on("click",function() {

					self._audio.paused ? self._audio.play() : self._audio.pause()

				});

			});

		}

		var video = new vedioFun();

		video.media_init();

	})(jQuery);

	</script>

</body>

</html>
巴特西

html5 音乐 audio

最新文章

热门文章
