碼上快樂

相關內容    簡體    繁體

HTML5之Audio音頻標簽學習

本文轉載自   查看原文   2016-07-12 17:30   3295 

HTML5中的新元素標簽

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

這些屬性和<video>元素標簽的屬性很類似

如何工作

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

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

<audio src="song.ogg" controls="controls"> Your browser does not support the audio tag. </audio>

常用的控制函數：

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

只讀的媒體屬性：

  1. duration獲取媒體文件的播放時長，以s為單位，如果無法獲取，則為NaN
  2. paused如果媒體文件被暫停，則返回true，否則返回false
  3. ended如果媒體文件播放完畢，則返回true
  4. startTime返回起始播放時間
  5. error返回錯誤代碼
  6. currentSrc以字符串形式返回正在播放或已加載的文件

可腳本控制的屬性值：

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

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

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

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() 暫停當前播放的音頻。


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 HTML5 audio與video標簽實現視頻播放，音頻播放 HTML5: HTML5 Audio(音頻) 關於HTML5音頻——audio標簽和Web Audio API各平台瀏覽器的支持情況 html5 音頻和視頻（audio And video） 不同瀏覽器對於html5 audio標簽和音頻格式的兼容性 html5中的video標簽和audio標簽 論HTML5 Audio 標簽歌詞同步的實現 HTML5 js獲取html5 audio 音頻時長方法 關於HTML5的audio標簽和video標簽刪除下載圖標
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM