选择风格关闭

最近浏览博客看见很多博客还用的原生态插入mp3，看上去并不美观!所以我去网上找了一个比较好看的MP3插入代码，提供给各位博主！

使用教程：

需要引入jquery.min.js

一、引入以下js和ccs

	<script type="text/javascript" src="weixinaudio.js"></script>  



	<link rel='stylesheet' href='weixin.css' /> 

二、需要显示的地方加入以下代码

<p class="weixinAudio">
			<audio src="" id="media" width="1" height="1" preload></audio>
			<span id="audio_area" class="db audio_area">
				<span class="audio_wrp db">
					<span class="audio_play_area">
						<i class="icon_audiodefault"><img src="images/shengyin.png" alt=""></i>
						<i class="icon_audioplaying"><img src="images/shengyin.gif" alt=""></i>
            		</span>
					<span id="audio_length" class="audio_length tips_global"></span>
					<span id="curent_time">0:00</span>
					<span class="db audio_info_area">
                		<strong class="db audio_title">浮夸</strong>
					</span>
					<span id="int_c"></span>
					<span class="progress_bar_box" style="width: 345px;">
					<span id="audio_progress" class="progress_bar" style="width: 0%;"></span>
			</span>
				</span>
			</span>

		</p>

	<script type="text/javascript">
		$('.weixinAudio').weixinAudio({
			autoplay:true,
			src:'fukua.mp3',
		});
	</script>
	<script>
		var a=0;
		$(".audio_play_area").click(function () {
				a++;
			if(a%2!=0){
				$(".icon_audiodefault").css({"display":"none"});
				$(".icon_audioplaying").css({"display":"block"});
				console.log(a);
			}
			if(a%2==0){
				console.log(a);
				$(".icon_audiodefault").css({"display":"block"});
				$(".icon_audioplaying").css({"display":"none"});
				}



		})
	</script>