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>

提交重置程式碼

自動運行

全螢幕