HTML5中 audio标签的样式修改

时间：2023-03-08 19:02:55

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

控制函数功能说明

  1. load()：加载音频、视频软件，通常不必调用，除非是动态生成的元素，用来在播放前预加载
  2. play()：加载并播放音频、视频文件，除非文件已经暂停在其他位置，否则默认重头开始播放
  3. pause()：暂停处于播放状态的音频、视频文件

audio 可脚本控制的特性值：

  1. src：音频文件路径。
  2. autoplay：设置音频是否自动播放 （默认有此属性为自动播放已经加载的的媒体文件），或查询是否已设置为autoplay
  3. autobuffer：设置是否在页面加载时自动缓冲音频，如果设置了autoplay，则忽略此特性
  4. loop：设置音频是否要循环播放。，或查询是否已设置为loop
  5. currentTime：以s为单位返回从开始播放到目前所花的时间，也可设置currentTime的值来跳转到特定位置
  6. controls： 显示或者隐藏用户控制界面（属性供添加播放、暂停和音量控件。 ）
  7. volume：在0.0到1.0间设置音量值，或查询当前音量值
  8. muted：设置是否静音

只读属性属性说明

  1. duration：获取媒体文件的播放时长，以s为单位，如果无法获取，则为NaN
  2. paused：如果媒体文件被暂停，则返回true，否则返回false
  3. ended：如果媒体文件播放完毕，则返回true
  4. startTime：返回起始播放时间，一般是0.0，除非是缓冲过的媒体文件，并一部分内容已经不在缓冲区
  5. error：在发生了错误后返回的错误代码
  6. currentSrc：以字符串形式返回正在播放或已加载的文件，对应于浏览器在source元素中选择的文件

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

<!--HTML：-->

<div class="btn-audio"><audio id="mp3Btn"><source src="data: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：-->

<style>

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;

}

</style>

<!--JavaScripy：-->

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

通过以上方法，audio的样式修改的问题就解决啦，你可以换成你想要的显示效果。

相关文章