HTML5 Audio(音频)

HTML5的audio功能上已经非常强大，回放，跳转，缓冲等以前只能用flash才能实现的功能，html5的audio都能轻松搞定。

但是直到现在，仍然不存在一项旨在网页上播放音频的标准。

audio的语法以及属性和方法

使用语法
<audio src="song.mp3" controls="controls" loop="loop" autoplay="autoplay">亲您的浏览器不支持html5的audio标签</audio>
属性
src 是歌曲的路径
controls 播放控制如果给标签里写了 controls="controls" 那么网页会显示audio自带的播放控件，如果没写就不会显示.
loop 歌曲循环在标签里添加该属性歌曲循环如果你的歌曲是从后台调取的的也可以在ajax里设置 loop=true/false来控制;
autoplay 当歌曲加载后自动播放，但是只有pc端可以实现移动端不行(pc端的浏览器要比移动端的完善很多，对有些属性支持也会好很多)
以上是标签内的属性当然也可以作为对象属性来调取控制auido.*

audio不单单是个标签他也是window下的一个对象，对象就有属性和方法，作为对象他有哪些常用的方法呢

对象属性：
currentTime 获取当前播放时间
duration 获取歌曲的总时间
play 是否在播放返回true/false
pause 是否暂停返回true/false
对象方法：
play() 播放歌曲
pause() 暂停歌曲
load()重新加载歌曲

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>

<!doctype html>
<html>
    <head> 
    <meta charset="utf-8"> 
    <title>php.cn</title> 
    </head>
    <body>
        <audio controls>
           <source src="horse.ogg" type="audio/ogg">
           <source src="horse.mp3" type="audio/mpeg">
             您的浏览器不支持 audio 元素。
        </audio>
    </body>
</html>

继续学习

新建文件

<!Doctype html> <html> <head> <title>HTML5多媒体</title> <meta charset="utf-8"/> <script> function onInputFileChange() { var file = document.getElementById('file').files[0]; var url = URL.createObjectURL(file); console.log(url); document.getElementById("audio_id").src = url; } </script> </head> <body> <input type="file" id="file" onchange="onInputFileChange()"> <audio id="audio_id" controls autoplay loop>Your browser can't support HTML5 Audio</audio> </body> </html>

提交重置代码

自动运行

章节

笔记

提问

课件

反馈

捐赠