HTML5之Audio音頻標籤學習

時間 2019-11-19

標籤 html5 html audio 音頻標籤學習欄目 HTML5 简体版

原文原文鏈接

原文連接：http://caibaojian.com/html5-audio.htmljavascript

HTML5中的新元素標籤css

src：音頻文件路徑。
autobuffer：設置是否在頁面加載時自動緩衝音頻。
autoplay：設置音頻是否自動播放。
loop：設置音頻是否要循環播放。
controls：屬性供添加播放、暫停和音量控件。

這些屬性和<video>元素標籤的屬性很相似html

如何工做

<audio src="song.mp3"></audio>

一樣 <audio> 與 </audio> 之間插入的內容是供不支持 audio 元素的瀏覽器顯示的：·html5

//code from http://caibaojian.com/html5-audio.html
<audio src="song.ogg" controls="controls"> Your browser does not support the audio tag. </audio>

經常使用的控制函數：java

load()：加載音頻、視頻軟件
play()：加載並播放音頻、視頻文件或從新播放暫停的的音頻、視頻
pause()：暫停出於播放狀態的音頻、視頻文件
canPlayType(obj)：測試是否支持給定的Mini類型的文件

只讀的媒體屬性：css3

duration獲取媒體文件的播放時長，以s爲單位，若是沒法獲取，則爲NaN
paused若是媒體文件被暫停，則返回true，不然返回false
ended若是媒體文件播放完畢，則返回true
startTime返回起始播放時間
error返回錯誤代碼
currentSrc以字符串形式返回正在播放或已加載的文件

可腳本控制的屬性值：瀏覽器

autoplay：自動播放已經加載的的媒體文件
loop爲true：的時候則設定爲自動播放
currentTime：以s爲單位返回從開始播放到目前所花的時間
controls：顯示或者隱藏用戶控制界面
volume：音量值,從0.0至1.0之間
muted：設置是否靜音
autobuffer：是否進行緩衝加載

"我"的成長獨白 ESTELLE'S AUDIO PLAYER網絡

首先，先介紹一下"我"本身，和你同樣，我也是有生命的個體，但 (ke) 是 (xi) ，我比你更有靈性 [ 傲嬌 ]ide

audio.html

<body> <audio id='audio'>你的瀏覽器不支持喔！</audio> <div class='MusicPanel'> <div class='PanelLeft'><div class='circle'><span class='icon glyphicon-heart'></span></div></div> <!-- Like Button --> <div class='PanelRight'> <div class='Prev'><span class='icon glyphicon-step-backward'></span></div> <!-- Prev Song Button --> <div id='Play' class='Play'><span class='icon glyphicon-play'></span></div> <!-- Play & Pause Button --> <div class='Next'><span class='icon glyphicon-step-forward'></span></div> <!-- Next Song Button --> <div class="Song"><span class='SongAuthor'>Greyson Chance</span></br><span class='SongName'>Summertrain</span></div> <!-- Song Title --> <div class="Process"> <!-- Process --> <div class="ProcessAll" ></div> <!-- ProcessAll --> <div class="ProcessNow"></div> <!-- ProcessNow --> <div class="SongTime">00:00&nbsp;|&nbsp;00:00</div> <!-- Time --> </div> <!-- Process End --> </div> <!-- PanelRight End --> </div> <!-- MusicPanel End --> </body>

進度條邏輯函數

繪製兩條重疊的進度條，一條指示總進度 ProcessAll，另外一條指示已播放的進度 ProcessNow
根據已播放的時間佔總時間比，設置 ProcessNow 下 Width 的值，根據CSS的層疊規範，後寫的 ProcessNow 的顏色層在最高層

詳見 audio.js 函數 TimeSpan()

其次，我不能不穿衣服呀，我須要一件合適的袈裟，人見人愛，花見花開，車見車那啥兒，嘿嘿

audio.css

.MusicPanel{ width: 400px; height: 100px; margin: 0 auto; border:1px solid #76dba3; } .MusicPanel .PanelLeft{ width: 100px; height: 100px; display: inline-block; text-align: center; background: #76dba3; } .MusicPanel .PanelRight{ width: 260px; height: 80px; display: inline-block; padding: 10px 20px; position: absolute; background: #fdfef6; } .Prev,.Play,.Next{ display: inline-block; margin-right: 5px; } .Prev,.Next{ filter:alpha(opacity=30); -moz-opacity:0.3; opacity:0.3; cursor: not-allowed; } .Prev:hover,.Next:hover{ filter:alpha(opacity=30); -moz-opacity:0.3; opacity:0.3; cursor: not-allowed; } .Song{ display: inline-block; padding-left: 15px; } .SongTime{ float: right; font-family: cursive,microsoft Yahei; font-size: 14px; color:#ee8a87; } .Song:hover{ cursor: default; } .SongAuthor{ font-family: cursive,microsoft Yahei; color:#ee8a87; font-size: 18px; } .SongName{ font-family: cursive,microsoft Yahei; color:#ee8a87; font-size: 13px; } .PanelRight .icon{ display: inline-block; color:#f06d6a; font-size:22px; transition:0.3s; } .PanelRight .Play .icon:hover { cursor: pointer; color: #dd2924; } .PanelLeft .circle{ width: 40px; height: 40px; display: inline-block; margin-top: 30%; line-height: 40px; border-radius: 50%; border:1px solid white; transition:0.3s; } .icon{ font-family: "Glyphicons Halflings"; } .circle span{ color:white; font-size: 14px; transition:0.05s; } .circle:hover{ cursor: pointer; box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.6), 0px 2px 10px 0px rgba(0, 0, 0, 0.4); background: #f06d6a; border:1px solid #f06d6a; } .circle:hover span{ font-size: 18px; } .Process{ margin-top: 15px; } .ProcessAll{ width: 260px; float: left; height: 3px; cursor: pointer; background-color:rgba(0,0,0,0.2); } .ProcessNow{ width: 0px; float: left; position: absolute; height: 3px; cursor: pointer; background-color:#f06d6a; }

有了身體，也穿了袈裟，如今的我仍然只是一個空殼，束縛自由，沒法行動 [ 想哭 ]
"我" 還須要 JS 做爲權杖，讓我可以行走，或者給我一匹 JQuery，讓我可以策馬揚鞭，馳騁沙場，很高興的是，我擁有了後者 [ 驕傲 ]

audio.js

$(document).ready(function() { var audio = document.getElementById("audio"); audio.src = "/demo/summertrain.mp3"; $("#Play").on('click',function () { if(audio.paused){ if( $(this).children().hasClass('glyphicon-play') ) { $("#Play").children("span").removeClass("glyphicon-play").addClass("glyphicon-pause"); Play(); } } else{ $("#Play").children("span").removeClass("glyphicon-pause").addClass("glyphicon-play"); Pause(); } });// Button cilick function Play() { audio.play(); TimeSpan(); } //Play() function Pause() { audio.pause(); } //Pause() function TimeSpan() { var ProcessNow = 0; setInterval(function () { var ProcessNow = (audio.currentTime / audio.duration) * 260; $(".ProcessNow").css("width", ProcessNow); var currentTime = timeFormat(audio.currentTime); var timeAll = timeFormat(TimeAll()); $(".SongTime").html(currentTime + " | " + timeAll); }, 1000); } //TimeSpan() function timeFormat(number) { var minute = parseInt(number / 60); var second = parseInt(number % 60); minute = minute >= 10 ? minute : "0" + minute; second = second >= 10 ? second : "0" + second; return minute + ":" + second; } //timeFormat() function TimeAll() { return audio.duration; } //TimeAll() })

"鈕釦" ( ICON ) 是定製的Bootstrap，多虧了定製，否則的話得又得從新修補袈裟累成狗 [舒口氣]

This is me，sa flowers，papapapa ~

Let's Enjoy ：Where did you go

附錄：

Audio 對象屬性

屬性	描述
audioTracks	返回表示可用音頻軌道的 AudioTrackList 對象。
autoplay	設置或返回是否在就緒（加載完成）後隨即播放音頻。
buffered	返回表示音頻已緩衝部分的 TimeRanges 對象。
controller	返回表示音頻當前媒體控制器的 MediaController 對象。
controls	設置或返回音頻是否應該顯示控件（好比播放/暫停等）。
crossOrigin	設置或返回音頻的 CORS 設置。
currentSrc	返回當前音頻的 URL。
currentTime	設置或返回音頻中的當前播放位置（以秒計）。
defaultMuted	設置或返回音頻默認是否靜音。
defaultPlaybackRate	設置或返回音頻的默認播放速度。
duration	返回音頻的長度（以秒計）。
ended	返回音頻的播放是否已結束。
error	返回表示音頻錯誤狀態的 MediaError 對象。
loop	設置或返回音頻是否應在結束時再次播放。
mediaGroup	設置或返回音頻所屬媒介組合的名稱。
muted	設置或返回是否關閉聲音。
networkState	返回音頻的當前網絡狀態。
paused	設置或返回音頻是否暫停。
playbackRate	設置或返回音頻播放的速度。
played	返回表示音頻已播放部分的 TimeRanges 對象。
preload	設置或返回音頻的 preload 屬性的值。
readyState	返回音頻當前的就緒狀態。
seekable	返回表示音頻可尋址部分的 TimeRanges 對象。
seeking	返回用戶當前是否正在音頻中進行查找。
src	設置或返回音頻的 src 屬性的值。
textTracks	返回表示可用文本軌道的 TextTrackList 對象。
volume	設置或返回音頻的音量。

Audio 對象方法

方法	描述
addTextTrack()	向音頻添加新的文本軌道。
canPlayType()	檢查瀏覽器是否可以播放指定的音頻類型。
fastSeek()	在音頻播放器中指定播放時間。
getStartDate()	返回新的 Date 對象，表示當前時間線偏移量。
load()	從新加載音頻元素。
play()	開始播放音頻。
pause()	暫停當前播放的音頻。