html中
程序员文章站
2022-03-19 10:52:32
...
在HTML5标准网页里面,我们可以运用audio标签来完成我们对声音的调用及播放。以下是最经常见到的运用HTML5三种基本格式:
1.最少的代码
<audio src="song.ogg" controls="controls"></audio>
2.带有不兼容提醒的代码
<audio src="song.ogg" controls="controls"> Your browser does not support the audio tag. </audio>
3.尽量兼容浏览器的写法
<audio controls="controls"> <source src="song.ogg" type="audio/ogg"> <source src="song.mp3" type="audio/mpeg"> Your browser does not support the audio tag. </audio>
在HTML5 标准出现以前,程序员无法想使用<a>标签一样,轻松的播放音频文件。HTML5为解决这个问题,提供了一个新的标签<audio>,让程序员无须再大量的使用flash播放音频文件了。
HTML5 <audio>效果图:
HTML5 <audio>源码:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>HTML5音频播放器 |HTML5 audio</title> </head> <body style="padding:0px;margin:0px;text-align:center;"> <audio src="see-you-again.mp3" controls="controls" preload="auto" autoplay="autoplay" loop="loop"> 您浏览器不支持HTML5音频播放器 </audio> </body> </html>
audio 可脚本控制的特性值:
autoplay 自动播放已经加载的的媒体文件,或查询是否已设置为autoplay
loop 将媒体文件设置为循环播放,或查询是否已设置为loop
currentTime 以s为单位返回从开始播放到目前所花的时间,也可设置currentTime的值来跳转到特定位置
controls 显示或者隐藏用户控制界面
volume 在0.0到1.0间设置音量值,或查询当前音量值
muted 设置是否静音
autobuffer 媒体文件播放前是否进行缓冲加载,如果设置了autoplay,则忽略此特性
对于这些属性,主流的浏览器都支持。可是别以为就没有了兼容性,在音频播放流中,有两个阵营。firefox 和 opera 支持 ogg 音频,safari 和 ie 支持 mp3.幸好Google的chrome都支持。
以上就是html中<audio>标签的使用的详细内容,更多请关注其它相关文章!
推荐阅读
-
使用uploadify上传大于3兆的文件时显示成功,但是没有上传到文件夹中
-
thinkphp中开启smarty是否不能使用默认的模板布局?
-
PHP程序中的文件锁、互斥锁、读写锁使用技巧解析_PHP
-
PHP的Yii框架使用中的一些错误解决方法与建议
-
在多个页面使用同一个HTML片段的代码_javascript技巧
-
Oracle中序列的操作以及使用前对序列的初始化
-
html中标签的种类_html/css_WEB-ITnose
-
Node.js中关于多进程模块Cluster的详细介绍以及如何使用
-
php中json_decode()和json_encode()的使用方法
-
WordPress中调试缩略图的相关PHP函数使用解析,wordpress缩略图