首页 >web前端 >html教程 >html中如何修改<audio>标签的样式

html中如何修改<audio>标签的样式

黄舟
黄舟原创
2017-06-19 16:45:535572浏览

由于html5的流行,现在移动端大多数的需求都可以使用audio来播放音频,但您可能只是需要很简单的播放/停止效果,但不同的浏览器上的audio样式却不尽人意,那么要怎么改变这个样式呢,其实它的原理比较简单,就是把写audio的时候不要用controls属性,隐藏原生的audio, 然后用p之类标签,定义css样式美化起来用来显示播放器的效果,最后用js捕获audio事件,基本就是src路径、pause暂停、load加载、play播放这些。下面是audio标签的一些相关API:

控制函数功能说明

load():加载音频、视频软件,通常不必调用,除非是动态生成的元素,用来在播放前预加载

play():加载并播放音频、视频文件,除非文件已经暂停在其他位置,否则默认重头开始播放

pause():暂停处于播放状态的音频、视频文件

audio 可脚本控制的特性值:

src:音频文件路径。

autoplay:设置音频是否自动播放 (默认有此属性为自动播放已经加载的的媒体文件),或查询是否已设置为autoplay

autobuffer:设置是否在页面加载时自动缓冲音频,如果设置了autoplay,则忽略此特性

loop:设置音频是否要循环播放。,或查询是否已设置为loop

currentTime:以s为单位返回从开始播放到目前所花的时间,也可设置currentTime的值来跳转到特定位置

controls: 显示或者隐藏用户控制界面(属性供添加播放、暂停和音量控件。 )

volume:在0.0到1.0间设置音量值,或查询当前音量值

muted:设置是否静音

只读属性属性说明

duration:获取媒体文件的播放时长,以s为单位,如果无法获取,则为NaN

paused:如果媒体文件被暂停,则返回true,否则返回false

ended:如果媒体文件播放完毕,则返回true

startTime:返回起始播放时间,一般是0.0,除非是缓冲过的媒体文件,并一部分内容已经不在缓冲区

error:在发生了错误后返回的错误代码

currentSrc:以字符串形式返回正在播放或已加载的文件,对应于浏览器在source元素中选择的文件

对于这些属性,主流的浏览器都支持。可是别以为就没有了兼容性,在音频播放流中,有两个阵营。firefox 和 opera 支持 ogg 音频,safari 和 ie 支持 mp3。幸好Google的chrome都支持。

<p class="btn-audio"><audio id="mp3Btn"><source src="images/audio.mp3" type="audio/mpeg" /></audio></p>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.10.0/jquery.min.js"></script>
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;
}
<script type="text/javascript">
    $(function(){
        //播放完毕
        $(&#39;#mp3Btn&#39;).on(&#39;ended&#39;, function() {
            console.log("音频已播放完成");
            $(&#39;.btn-audio&#39;).css({&#39;background&#39;:&#39;url(images/voice_stop.png) no-repeat center bottom&#39;,&#39;background-size&#39;:&#39;cover&#39;});
        })
        //播放器控制
        var audio = document.getElementById(&#39;mp3Btn&#39;);
        audio.volume = .3;
        $(&#39;.btn-audio&#39;).click(function() {
            event.stopPropagation();//防止冒泡
            if(audio.paused){ //如果当前是暂停状态
                $(&#39;.btn-audio&#39;).css({&#39;background&#39;:&#39;url(images/voice_play.png) no-repeat center bottom&#39;,&#39;background-size&#39;:&#39;cover&#39;});
                audio.play(); //播放
                return;
            }else{//当前是播放状态
                $(&#39;.btn-audio&#39;).css({&#39;background&#39;:&#39;url(images/voice_stop.png) no-repeat center bottom&#39;,&#39;background-size&#39;:&#39;cover&#39;});
                audio.pause(); //暂停
            }
        });
    })
</script>

作为技术实现,它的原理比较简单,就是把原生的audio隐藏,然后用p来显示播放器的效果,然后调用它的click事件来触发play和stop,然后是时长duration,这个值有时能够获取,有时不行,比较坑,所以建议在audio标签上自定义duration属性存放时长,这时,如果组件获取不到时会来取这个值。 

this.settings.target.on(&#39;loadedmetadata&#39;, function() { 
_this.duration = _this.audio.duration; 
if (_this.duration != "Infinity") { 
_this.durationContent.html(Math.floor(_this.duration) + &#39;s&#39;); 
} else { 
var attr = $(_this.settings.target).attr(&#39;duration&#39;); 
if(attr){ 
_this.durationContent.html($(_this.settings.target).attr(&#39;duration&#39;)+"s"); 
}else{ 
_this.durationContent.html(&#39;&#39;); 
} 
} 
});

以上是html中如何修改<audio>标签的样式的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn