2017年8月23日,台风“天鸽”的到来,带来了些风雨,也给平淡的上班生活带来了些乐趣。
今天做的一个小需求,就是要在网页上添加音频,html5属性<audio> <source src="horse.ogg" type="audio/ogg"></audio>可以实现,用这个标签可以实现音频的播放,可是存在一个问题,就是会存在默认的标签样式。
解决方法:不需要标签自带的样式(把controls属性去掉),使用js控制音频的播放暂停。
HTML:
<div class="btn-audio"> <audio id="mp3Btn"> <source src="images/audio.mp3" type="audio/mpeg" /> </audio> </div> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.10.0/jquery.min.js"></script>
CSS:
body{background:#2b2938;} .btn-audio{ margin: 90px auto; 186px; height: 186px; background:url(images/voice_stop.png) no-repeat center bottom; background-size:cover; }
Javascript:
<script type="text/javascript"> $(function(){ //播放完毕 $('#mp3Btn').on('ended', function() { console.log("音频已播放完成"); $('.btn-audio').css({'background':'url(images/voice_stop.png) no-repeat center bottom','background-size':'cover'}); }) //播放器控制 var audio = document.getElementById('mp3Btn'); audio.volume = .3; $('.btn-audio').click(function() { event.stopPropagation();//防止冒泡 if(audio.paused){ //如果当前是暂停状态 $('.btn-audio').css({'background':'url(images/voice_play.png) no-repeat center bottom','background-size':'cover'}); audio.play(); //播放 return; }else{//当前是播放状态 $('.btn-audio').css({'background':'url(images/voice_stop.png) no-repeat center bottom','background-size':'cover'}); audio.pause(); //暂停 } }); }) </script>
通过以上的代码,就可以调整成自己喜欢的样式了。
原文地址:http://blog.csdn.net/l333f/article/details/60877276