H5的audio物件,這些知識你瞭解嗎?
阿新 • • 發佈:2018-11-15
一個audio物件就是普通的dom物件 比其他的dom物件多出一些自己獨有的屬性方法和事件,下面介紹一下他常用的屬性、方法和事件
自己初步接觸html5的新屬性audio物件,做的一個簡易的音樂播放器,大家有興趣可以檢視,一起討論學習,有些功能尚未完善。。。敬請諒解!
//Audio的程式碼格式
<audio id="audio">
<source src="music/only.mp3"/>
</audio >
//獲取audio物件
var audio = $('audio').get(0);
Audio物件的屬性
屬性 | 描述 |
---|---|
audio.volume | (讀/寫) 音量 |
audio.src | (讀/寫) 歌曲地址 |
audio.currentTime | (讀/寫) 歌曲當前已播放時長 |
audio.duration | (讀) 歌曲的總長度 |
audio.paused | (讀) 布林型別 是否處於暫停狀態 |
audio.ended | (讀) 布林型別 歌曲是否已經播放完畢 |
Audio物件的方法
方法 | 描述 |
---|---|
audio.play() | 讓歌曲開始播放 |
audio.pause() | 讓歌曲開始暫停 |
audio.load() | 重新載入音訊元素 |
audio.getStartDate() | 返回新的 Date 物件,表示當前時間線偏移量 |
audio.canPlayType() | 檢查瀏覽器是否能夠播放指定的音訊型別 |
audio.fastSeek() | 在音訊播放器中指定播放時間 |
Audio物件的事件
事件 | 描述 |
---|---|
audio.oncanplay = fn() | 當歌曲下載完之後呼叫fn |
audio.onvolumechange = fn() | 當audio.volume發生變換的時候呼叫fn |
audio.onplay = fn() | 歌曲開始播放之後呼叫fn |
audio.onpause = fn() | 歌曲暫停之後呼叫fn |
audio.ontimeupdate = fn() | 歌曲在播放的過程中會一直呼叫fn |
audio.onended = fn() | 一首歌曲播放完之後呼叫fn |
事件驅動的程式設計模式
// 這裡只設置資料
$('音量div').on('click',function(e){
audio.volume = e.offsetX / e.offsetWidth;
})
// 這裡操作介面
$('audio').on('volumechange',function(){
let width = (this.currentTime/this.duration).toFixed(2)*100 + '%';
$('音量div').find('.inner').width(width);
})
開始專案
使用一個html5模組或其他js外掛的一般步驟
- 查閱API
- 快速定型API
- 確定一個例子,開始製作
例子中如果依賴一些公開庫。
注意:不要下載到本地然後引用
如果我們想分享程式碼給別人, 需要把所有我們下載的檔案也拷貝給別人, 尤其當依賴的公開庫多的情況下, 專案會變的很大, 上傳到版本控制系統也會變的很龐大。
我們通過其他方式來解決
- 使用
cdn
- 使用前端自動化工具
bower
bower init
bower install jquery --save
會生成一個.bower檔案 ,這樣任何人拿到專案之後,同樣去執行bower install
, 就會下載出來所有的依賴庫
node.js
var fs = require('fs');
var minglinghang = require('child_process');
var files = fs.readdirSync('./musics/');
var result = [];
var format_duration = function(str){
var num = Number(str);
var fen = parseInt( num/60 );
var miao = Math.round(num%60);
miao = (miao < 10)?( '0' + miao):miao;
fen = '0' + fen;
return fen + ':' + miao;
}
files.forEach(function(v){
var data = JSON.parse( minglinghang.execSync('ffprobe -v quiet -print_format json -show_format "./musics/'+ v +'"'));
var duration = format_duration(data.format.duration);
var r = {
filename: data.format.filename,
duration: duration,
title: data.format.tags.title,
album: data.format.tags.album,
artist: data.format.tags.artist
};
result.push( r );
})
fs.writeFile('./database.json',JSON.stringify(result, null, 2) );
遞迴遍歷資料夾
var fs = require('fs');
var childProcess = require('child_process');
// 遞迴遍歷資料夾 對其中的每一個檔案呼叫 callback
var walk = function(path, callback){
var files = fs.readdirSync(path);
for( var i = 0; i< files.length; i++ ){
var newpath = path + files[i];
if ( fs.statSync(newpath).isFile() ){
callback(files[i],newpath);
}else if(fs.statSync(newpath).isDirectory() ){
walk( newpath+'/' ) ;
}
}
};
// 遍歷./musics 資料夾 對其中的音樂檔案 呼叫ffprobe 解析音樂資料
var fileExtension = ['mp3', 'wav'];
var database = [];
walk('./musics/', function(name, path){
var extName = name.split('.').pop();
if( fileExtension.indexOf(extName) !== -1 ){
// 這個在windows下不生效
var path = path.trim().replace(/\s/g,'\\ ');
var data = childProcess.execSync('ffprobe -v quiet -print_format json -show_format ' + path);
database.push( JSON.parse(data).format );
}
});
// 寫入js檔案
var js = 'var database = ' + JSON.stringify(database, null, 4);
fs.writeFile('./scripts/database.js', js, function (err) {
if (err){
throw err;
}
console.log('saved!');
});