• 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;
             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

    “世界是个叙述者, 而我们却蒙上黑布, 嗤之以鼻。”
  • 相关阅读:
    团队管理 - 团队发展五阶段
    信息系统开发平台OpenExpressApp - 支持差异保存
    MDSF:Mendix介绍
    需求入门 - 获取需求方法:Nine Boxes
    个人管理 - 第四代时间管理
    需求入门 - 业务需求分析入门(公司研发峰会演讲ppt)
    个人管理 - Learn More,Study Less!
    如何培养一个人:从育儿谈起
    个人管理 - 如何演讲
    企业架构 - ADM方法概要介绍
  • 原文地址:https://www.cnblogs.com/wush-1215/p/7418550.html
Copyright © 2020-2023  润新知