国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

實現一個簡單音樂播放器

cocopeak / 1044人閱讀

做的一個簡單的半成品播放器

一、需求分析

1、寫靜態頁面
2、通過getMusicList函數用Ajax獲取歌曲數據列表musiclist
3、通過loadMusic函數實現歌曲的播放功能
4、根據獲取的歌曲數據來設置歌名、作者和背景圖片
5、設置進度條隨歌曲進度而實時變更,通過給audio對象綁定ontimeupdate事件來實現
6、設置歌曲時間隨歌曲進度而實時更新,通過給audio對象綁定ontimeupdate或者setimeInval來實現
7、設置暫停鍵的功能
8、設置下一首的功能
9、設置上一首的功能
10、設置歌曲播放完成后,自動播放下一首的功能
11、設置點擊進度條切換歌曲進度的功能

二、解析對象

currentIndex 歌曲的當前下標
audio 當前歌曲對象
MusicList 歌曲數據對象
musicObj 當前歌曲對象 loadMusic函數傳遞的參數

三、前提知識(audio對象的屬性) 1、audioObject

創建或者獲取的audio對象,可通過以下兩種方式得到

方法1:

var audioObject = new Audio("http://cloud.hunger-valley.co...")

2、audioObject.play()

開始播放

3、audioObject.pause()

暫停播放

4、audioObject.autoPlay

設置或者獲取自動播放狀態

audioObject.autoPlay = true //設置為自動播放,下次更換 audioObject.src 后會自動播放音樂
audioObject.autoPlay = false //設置不自動播放
console.log(audioObject.autoPlay)

5、audioObject.src

設置或者獲取音樂地址

audioObject.src = "http://cloud.hunger-valley.com/music/ifyou.mp3"
console.log(audioObject.src)

6、audioObject.volume

設置或者獲取音量,最大值為1,0為靜音

audioObject.volume = 0.5
audioObject.volume = 1
console.log(audioObject.volume)

7、audioObject.loop

設置或者獲取循環狀態

audioObject.loop = true
console.log(audioObject.loop)

8、audioObject.duration

獲取音樂長度,單位為秒

console.log(audioObject.duration)

9、 audioObject.currentTime

設置或者獲取播放時間

console.log(audioObject.currentTime)

10、 audioObject.ended

判斷音樂是否播放完畢,只讀屬性

11、audio.paused

表示音頻對象是否處于暫停狀態,可以用來設置暫停鍵

四、前提知識(audio對象的事件) 1、playing

當音樂開始播放,暫停后重新開始播放,設置currentTime后開始播放時觸發

audioObject.addEventListener("playing", function(){
console.log("playing")
})

2、pause

當音樂暫停時和結束時觸發

audioObject.addEventListener("pause", function(){
console.log("pause")
})

3、ended

當音樂結束時觸發

audioObject.addEventListener("ended", function(){
console.log("ended")
})

3、timeupdate

當currentTime更新時會觸發timeupdate事件,這個事件的觸發頻率由系統決定,但是會保證每秒觸發4-66次(前提是每次事件處理不會超過250ms.

//如下代碼設置 每1秒左右執行一次
audioObject.shouldUpdate = true
audioObject.ontimeupdate = function(){
var _this = this
if(_this.shouldUpdate) {

 //do something
 console.log("update")
 _this.shouldUpdate = false
setTimeout(function(){
  _this.shouldUpdate = true
}, 1000)

}
}

4、volumechange

當音量改變時觸發

audioObject.onvolumechange = function(){
  console.log("volumechange")
}
五、遇到的坑 1、設置progress-now的寬度隨著播放時間變化而變化

我寫成的事這樣

 audio.ontimeupdate=function(){
        $(".progress-now").style.width=(this.currentTime/this.duration)*(getComputedStyle($(".bar")).width)
    }

實際上應該寫成百分比就可以了

audio.ontimeupdate=function(e){
$(".progress-now").style.width = (this.currentTime/this.duration)*100 + "%"}
2、兩種方式設置歌曲時間隨進度變化

1)設置ontimeupdate來設置,每秒觸發4-66次,時間變化不均勻

 audio.ontimeupdate=function(e){
   $(".progress-now").style.width = (this.currentTime/this.duration)*100 + "%"
   var min=Math.floor(this.currentTime/60)
   var sec= Math.floor(this.currentTime %60)>9?(Math.floor(this.currentTime%60)):("0"+Math.floor(this.currentTime%60))
   $(".time").innerText=""+min+":"+sec
 }

2)通過setInterval來設置,每秒一次,時間變化均勻
注意:這個函數不能寫成this.currentTime %60,不然輸出會變成NaN。要寫成audio.currentTime。我猜想應該是和set intervalthis的值會發生改變。之后填坑

 audio.onplay=function(){
       clock =setInterval(function(){
       var min=Math.floor(audio.currentTime/60)
       var sec= Math.floor(audio.currentTime %60)>9?(Math.floor(audio.currentTime%60)):("0"+Math.floor(audio.currentTime%60))
       $(".time").innerText=""+min+":"+sec
 
         })
     }
audio.onpause=function(){
        clearInterval(clock)
    }

注意:不能寫成 var clock,clock必須是全局變量,沒辦法傳遞參數到clearInterval(clock),會報以下錯

3、做寬度相除,需要加上parseInt將字符串轉換成數值

不然輸出奇怪的數值

$(".musicbox .bar").onclick=function(e){
         var percent=e.offsetX/ parseInt(getComputedStyle(this).width)
         audio.currentTime= audio.duration*percent
         //不要忘記了parseInt,把寬度轉換為數值
     }
4、下一首的下標實現增加循環
currentIndex = (++currentIndex)%MusicList.length
5、上一首的下標實現自減循環
 currentIndex = ((--currentIndex)+MusicList.length)%MusicList.length
6、GitHub不支持http協議

GitHub是https協議的,我在代碼里面寫了http協議,就報錯了,需要全部改成https。

7、需要把引入js文件的代碼放在最后,不然會報錯

Uncaught TypeError: Cannot set property "onclick" of null。
原因是加載到onclick這個代碼的時候,發現dom結構還沒有加載好,所以要把引入js文件的代碼放在html的最后

8、引入js文件的路徑錯誤

本地測試沒有問題,但是上傳github后出現了引入js錯誤,發現是路徑錯誤,需要加上./表示相對于當前的文件夾中的js和css

六、預覽鏈接

https://0612bamboo.github.io/...

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/99865.html

相關文章

  • HTML+CSS+JAVASCRIPT 高仿低配網頁版網易云音樂放器

    摘要:高仿低配網頁版網易云音樂播放器前言沒有使用任何框架,只是想用最簡單純的代碼實現下前臺后臺是參考網上的例子寫的,代碼是在的基礎上重新寫的還有她的姊妹篇網易云音樂移動端,請查看這里寫在前頭的話鄙人野生前端一只,專業,自學前端已經一年多了 HTML+CSS+JAVASCRIPT 高仿低配網頁版網易云音樂播放器 showImg(https://segmentfault.com/img/remo...

    RaoMeng 評論0 收藏0
  • HTML+CSS+JAVASCRIPT 高仿低配網頁版網易云音樂放器

    摘要:高仿低配網頁版網易云音樂播放器前言沒有使用任何框架,只是想用最簡單純的代碼實現下前臺后臺是參考網上的例子寫的,代碼是在的基礎上重新寫的還有她的姊妹篇網易云音樂移動端,請查看這里寫在前頭的話鄙人野生前端一只,專業,自學前端已經一年多了 HTML+CSS+JAVASCRIPT 高仿低配網頁版網易云音樂播放器 showImg(https://segmentfault.com/img/remo...

    sean 評論0 收藏0

發表評論

0條評論

cocopeak

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<