摘要:如果出現該屬性,則向用戶顯示控件,比如播放按鈕。如果出現該屬性,則音頻在頁面加載時進行加載,并預備播放。如果使用,則忽略該屬性。要播放的音頻的。
因為最近在寫一個音樂播放器,本來想做完整個項目再寫博客的,但抑制不住我體內的洪荒之力,其實是怕到時候寫起來長,就決定把一些知識點梳理出來
先了解一下HTML5出的audio標簽
audio的定義audio標簽定義聲音,比如音樂或其他音頻流
audio標簽的常用屬性autoplay 如果出現該屬性,則音頻在就緒后馬上播放。
controls 如果出現該屬性,則向用戶顯示控件,比如播放按鈕。
loop 如果出現該屬性,則每當音頻結束時重新開始播放。
preload 如果出現該屬性,則音頻在頁面加載時進行加載,并預備播放。如果使用 "autoplay",則忽略該屬性。
src 要播放的音頻的 URL。
audio DOM的常用屬性autoplay 設置或返回是否在加載完成后隨即播放音頻/視頻
controls 設置或返回音頻/視頻是否顯示控件(比如播放/暫停等)
currentSrc 返回當前音頻/視頻的 URL
currentTime 設置或返回音頻/視頻中的當前播放位置(以秒計)
muted 設置或返回音頻/視頻默認是否靜音
duration 返回當前音頻/視頻的長度(以秒計)
ended 返回音頻/視頻的播放是否已結束
paused 設置或返回音頻/視頻是否暫停
played 返回表示音頻/視頻已播放部分的 TimeRanges 對象
audio DOM的常用方法load() 重新加載音頻/視頻元素
play() 開始播放音頻/視頻
pause() 暫停當前播放的音頻/視頻
canPlayType() 檢測瀏覽器是否能播放指定的音頻/視頻類型
audio的用法我們大致上了解了,那么怎么制作自己喜歡的進度條呢?
定制自己喜歡的進度條定制自己喜歡的進度條,我們需要以下步驟:
將原生的audio控件隱藏用一個div表示進度條組件
給進度條添加樣式
* { margin: 0; padding: 0; } .progress { display: flex; justify-content: space-between; align-items: center; width: 380px; margin: 100px auto; } .progress-bar { position: relative; width: 70%; height: 5px; background-color: #eee; vertical-align: 2px; border-radius: 3px; cursor: pointer; } .now { position: absolute; left: 0; display: inline-block; height: 5px; width: 70%; background: #31c27c; } .now::after { content: ""; position: absolute; left: 100%; width: 3px; height: 7px; background-color: lightblue; }為audio的點擊進度條添加事件
const audio = document.getElementById("music") const start = document.querySelector(".start") const end = document.querySelector(".end") const progressBar = document.querySelector(".progress-bar") const now = document.querySelector(".now") function conversion (value) { let minute = Math.floor(value / 60) minute = minute.toString().length === 1 ? ("0" + minute) : minute let second = Math.round(value % 60) second = second.toString().length === 1 ? ("0" + second) : second return `${minute}:${second}` } audio.onloadedmetadata = function () { end.innerHTML = conversion(audio.duration) start.innerHTML = conversion(audio.currentTime) } progressBar.addEventListener("click", function (event) { let coordStart = this.getBoundingClientRect().left let coordEnd = event.pageX let p = (coordEnd - coordStart) / this.offsetWidth now.style.width = p.toFixed(3) * 100 + "%" audio.currentTime = p * audio.duration audio.play() }) setInterval(() => { start.innerHTML = conversion(audio.currentTime) now.style.width = audio.currentTime / audio.duration.toFixed(3) * 100 + "%" }, 1000)
到這里進度條就完成了~~
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/82906.html
前言:當下音樂播放器不勝其數,為了更好的掌握一些東西,我們來自己制作一個音樂播放器。 文章目錄: 一.開發環境:二.頁面視圖:1.主文件入口(首頁):2.音樂播放界面: 三.功能實現(1)、index.html:(2)、播放音樂(music.html):(3)、樣式文件(index.css): 四.項目地址: 一.開發環境: 開發工具:HbuliderX; 框架:Vant,Mui,V...
摘要:基于的音樂播放器音樂該應用使用全家桶完成,借助音樂來實現音樂搜索播放,應用持續更新中源代碼源代碼地址如果覺得還不錯的大家可以給個我會持續更新的附音樂整理效果圖在線預覽在線預覽地址音樂播放器端請在瀏覽器的移動端模式下查看使用使用依賴目 基于Vue2.0的音樂播放器(QQ音樂API) 該應用使用Vue全家桶完成,借助QQ音樂api來實現音樂搜索播放,應用持續更新中... 源代碼 源代碼地址...
摘要:高仿低配網頁版網易云音樂播放器前言沒有使用任何框架,只是想用最簡單純的代碼實現下前臺后臺是參考網上的例子寫的,代碼是在的基礎上重新寫的還有她的姊妹篇網易云音樂移動端,請查看這里寫在前頭的話鄙人野生前端一只,專業,自學前端已經一年多了 HTML+CSS+JAVASCRIPT 高仿低配網頁版網易云音樂播放器 showImg(https://segmentfault.com/img/remo...
閱讀 2504·2021-11-15 11:38
閱讀 1948·2021-11-05 09:37
閱讀 2257·2021-10-08 10:12
閱讀 2807·2019-08-30 15:55
閱讀 2112·2019-08-30 15:52
閱讀 1221·2019-08-29 13:24
閱讀 463·2019-08-26 18:27
閱讀 1473·2019-08-26 18:27