音樂API
1. audioObject
創(chuàng)建或者獲取的audio對象,可通過以下兩種方式得到
方法1:
<audio id="music" src="http://cloud.hunger-valley.com/music/玫瑰.mp3">你的瀏覽器不支持喔!</audio>
<script>
var audioObject = document.querySelector('#music')
</script>
方法2
var audioObject = new Audio('http://cloud.hunger-valley.com/music/玫瑰.mp3')
2. audioObject.play()
開始播放
3. audioObject.pause()
暫停播放
4. audioObject.autoPlay
設(shè)置或者獲取自動播放狀態(tài)
audioObject.autoPlay = true //設(shè)置為自動播放,下次更換 audioObject.src 后會自動播放音樂
audioObject.autoPlay = false //設(shè)置不自動播放
console.log(audioObject.autoPlay)
5.audioObject.src
設(shè)置或者獲取音樂地址
audioObject.src = "http://cloud.hunger-valley.com/music/ifyou.mp3"
console.log(audioObject.src)
6. audioObject.volume
設(shè)置或者獲取音量,最大值為1,0為靜音
audioObject.volume = 0.5
audioObject.volume = 1
console.log(audioObject.volume)
7. audioObject.loop
設(shè)置或者獲取循環(huán)狀態(tài)
audioObject.loop = true
console.log(audioObject.loop)
8. audioObject.duration
獲取音樂長度,單位為秒
console.log(audioObject.duration)
9. audioObject.currentTime
設(shè)置或者獲取播放時間
console.log(audioObject.currentTime)
10. audioObject.ended
判斷音樂是否播放完畢,只讀屬性
事件
1. playing
當音樂開始播放,暫停后重新開始播放,設(shè)置currentTime后開始播放時觸發(fā)
audioObject.addEventListener('playing', function(){
console.log('playing')
})
2. pause
當音樂暫停時和結(jié)束時觸發(fā)
audioObject.addEventListener('pause', function(){
console.log('pause')
})
3. ended
當音樂結(jié)束時觸發(fā)
audioObject.addEventListener('ended', function(){
console.log('ended')
})
3. timeupdate
當currentTime更新時會觸發(fā)timeupdate事件,這個事件的觸發(fā)頻率由系統(tǒng)決定,但是會保證每秒觸發(fā)4-66次(前提是每次事件處理不會超過250ms.
//如下代碼設(shè)置 每1秒左右執(zhí)行一次
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
當音量改變時觸發(fā)
audioObject.onvolumechange = function(){
console.log('volumechange')
}
HTMLElement. hidden 是一個 Boolean
類型,如果想要隱藏文檔,值設(shè)置為 true,否則值設(shè)置為
false
這是完全不同于使用 CSS 屬性 display來控制一個元素的可見性 。 hidden 屬性應(yīng)用于所有的展現(xiàn)模式,并且不應(yīng)該用來隱藏用戶直接訪問的內(nèi)容。getComputedStyle 獲取元素樣式-----
var element = document.querySelector(element)
getComputedStyle(element).width === xxxpx parseInt將字符串轉(zhuǎn)為數(shù)字element.style 設(shè)置element的css的屬性(eg:element.style.width = 111px)
e.offsetX 當前鼠標在element上的橫坐標坐標
e.offsetY當前鼠標在element上的縱坐標坐標
111 + '' = '111' 將數(shù)字裝換為字符串