Html5--audio标签使用教程

audio标签简介
audio标签是网页中播放音频来使用的，audio是一个双标签

audio标签使用教程

1.0 新建audio标签
2.0 audio标签各种属性使用方法
3.0 audio解决各种浏览器对音频的兼容方式

1.0 新建audio标签

用法:<audio src="url"></audio>
注意事项: 1. audio是一个双标签2. 目前audio支持三种音频格式2.1: mp3文件的音频支持2.2: ogg Vorbis文件的音频支持2.3: Wav文件的音频支持3. audio标签在网页刚开始是不显示控件的(不可见),只有标签中添加'controls'属性,audio标签才可见。4.src里面存放音频路径

不同浏览器对audio标签文件的兼容性，参考W3c文档。

2.0 audio标签各种属性使用方法

controls属性
用法:<audio src="小池塘.mp3" autoplay></audio>
作用: 向用户显示控件，使音频标签可视。
属性值:controls
autoplay属性
用法:<audio src="小池塘.mp3" autuplay="autoplay"></audio>
作用:打开浏览器,自动播放音频。
属性值:autoplay
loop属性
用法:<audio src="小池塘.mp3" loop="loop"></audio>
作用:音频播放结束后,在次播放。
属性值:loop
src属性
用法:<audio src="小池塘.mp3" ></audio>
作用:播放音频的路径。
属性值:url(要播放的音频路径)。
src、autoplay、loop、controls四种属性可以写在一起
用法:<audio src="小池塘.mp3" autoplay loop controls ></audio>
注意: loop、autoplay、controls属性后面不跟属性值也是合法的,默认值为它们本身。

3.0 audio解决各种浏览器对音频的兼容方式

解决兼容:

<audio controls><source src="public/胡永 - 我养你.mp3" type="audio/mpeg"><source src="public/胡永 - 我养你.ogg" type="audio/ogg">你的浏览器不兼容该文件的音频</audio>/*<source>标签介绍它是一个单表,为媒体标签。type是为了规定媒体文件MIME文件类型*/

方法介绍:给一个audio标签多个音频,让浏览器取选择兼容的音频来播放，如果都不兼容，就会告诉用户(你的浏览器不兼容该文件的音频)。

Html5--audio标签使用教程相关推荐

HTML5 Audio标签方法和函数API介绍
问说网 > 文章教程 > 网页制作 > HTML5 Audio标签方法和函数API介绍 Audio APIHTML5HTML5 Audio预加载 HTML5 Audio标签方法和函 ...
html5比html4的音频使用方法,HTML5 audio标签的用法示例
您的位置:首页 - 教程 - HTML5 - 正文 HTML5 audio标签的用法示例标签定义声音,比如音乐或其他音频流.html5 audio可以不用Flash插件就可以听音乐看视频,并不是全部 ...
HTML5 audio 标签-在html中定义声音的标签
2019独角兽企业重金招聘Python工程师标准>>> 本文来源 169it HTML 5 <audio> 标签定义和用法 <audio> 标签定义声音,比如 ...
HTML5 Audio标签API整理(三)
一.浏览器支持 Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 都支持 <audio> 元素. 注意: Internet Ex ...
HTML5 Audio/标签Api整理（二）
1.实例2: 相对较完整 Html代码: <style>#volumeSlider .slider-selection {background:#bababa;} </style&g ...
HTML5 audio 标签播放事件流程
此代码包括了html5 audio 标签整个播放流程. 你可以暂停,调整音量,拖动进度条观察一下 var audio = new Audio(); document.body.appendChi ...
Javascript控制html5 Audio标签
Javascript控制html5 Audio标签 9 Replies 在上一篇文章:Html5 audio标签(属性)的使用详解中已经把关于audio标签的如何使用以及支持属性说清楚了.这里写篇文章 ...
html5播放器源码自己添加音乐,HTML5 audio标签打造属于自己的音乐播放器
最近学习了HTML5中的Audio标签,学习他的最好方式当然是实践,于是就自己写了一个.那就直接上演示链接吧 http://htmlpreview.github.io/?https://github. ...
论HTML5 Audio 标签歌词同步的实现
HTML5草案里面其实有原生的字幕标签(<track> Tag)的,但使用的是vtt格式的文件,非常规的字幕(.sub, .srt)或歌词文件(.lrc). 用法如下(代码来自W3Scho ...
HTML5 Audio标签API整理(一)
简单实例: <audio id="myAudio"></audio><script>var myAudio = document.getElem ...

Html5--audio标签使用教程

audio标签使用教程

1.0 新建audio标签

2.0 audio标签各种属性使用方法

3.0 audio解决各种浏览器对音频的兼容方式

Html5--audio标签使用教程相关推荐

最新文章

热门文章