html中<audio>标签的使用-html教程-PHP中文网

首页

web前端

html教程

html中<audio>标签的使用

黄舟

Jun 19, 2017 pm 04:31 PM

audio html 使用标签

在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 标准出现以前，程序员无法想使用标签一样，轻松的播放音频文件。HTML5为解决这个问题，提供了一个新的标签

HTML5

<!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>标签的使用的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明