HTML5中 audio標簽的樣式修改

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;
        width: 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