html中<audio>标签的使用

黄舟原创: 2017-06-19 16:31:23 2707浏览

在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>标签的使用的详细内容，更多请关注php中文网其它相关文章！

audio html 使用标签 PHP课程 HTML视频教程 CSS视频 JS视频教程 Vue视频教程

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