audio标签的样式修改

由于H5的流行，现在移动端大多数的需求都可以使用audio来播放音频，但您可能只是需要很简单的播放/停止效果，但不同的浏览器上的audio样式却不尽人意，那么要怎么改变这个样式呢，其实它的原理比较简单，就是把写audio的时候不要用controls属性，隐藏原生的audio，然后用div之类标签，定义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都支持。

代码如下：

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:

  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:

$(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(); //暂停}});
})

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

audio标签的样式修改相关推荐

audio 上一首下一首自定义样式_HTML5中 audio标签的样式修改
2017年8月23日,台风"天鸽"的到来,带来了些风雨,也给平淡的上班生活带来了些乐趣. 今天做的一个小需求,就是要在网页上添加音频,html5属性可以实现,用这个标签可以实现音 ...
H5 audio 音频标签自定义样式修改以及添加播放控制事件
20181023 更新原来的代码拖动进度点只写了mouse事件,手机端的话应该是touch事件.所以出现了有朋友说的移动端无法拖动进度条的问题.现在更新的代码已经加上touch事件,即无论是手机模式 ...
Cannot read property 'nodeType' of null; audio元素默认样式下载按钮
1.chrome-->console抛出如下错误: Uncaught TypeError: Cannot read property 'nodeType' of null 错误原因:从stack ...
iview的表格自定义_Vue中使用iview-UI表格样式修改和使用自定义模板数据渲染相关...
项目前台页面用的iview-UI,下面对表格相关的样式修改和数据渲染进行一下总结数据渲染相关正常渲染直接从教程中拿出来的组件代码: columns中填写的数据必须是一个数组,代表的是表头相关,常 ...
html5 audio样式修改,html5audio美化 html5 audio 顺序播放
如何修改HTML5 audio 的样式写的时候不要用controls, 然后自己写div或者a标签,定义样式. 再用js捕获audio事件就可以了. 基本就是src pause暂停 load加载 p ...
非插件修改 WordPress 标签云样式
对于 WordPress 常见的一种修改标签云字体样式的办法,是直接修改 wp-includes 目录下面的 category-template.php 文件,不过这种做法不推荐使用,毕竟是系统文件, ...
label标签for属性修改样式
通过label标签for属性修改样式时,不会立即修改radio和checkbox的checked属性值,需要在radio和checkbox的表单元素上添加新的触发事件来修改checked属性值.变态的 ...
html select样式修改,select标签的默认样式修改
在项目中,用到select标签,需要对select标签自定义样式. 在chrome浏览器中会对select有一个默认的border-radius,并且无法去掉. 可以通过下面的方法来解决: 1.需要通 ...
第六节：用audio标签打造一个属于自己的HTML5音乐播放器
上一章节,我们刚刚讲了<video>标签,今晚,我们讲的是<audio>标签,这两个东东除了表示的内容不一样以外,其他的特性相似的地方真的太多了,属性和用法几乎一样,也就说,如 ...

audio标签的样式修改

audio标签的样式修改相关推荐

最新文章

热门文章