1. 程式人生 > >H5的audio物件,這些知識你瞭解嗎?

H5的audio物件,這些知識你瞭解嗎?

一個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外掛的一般步驟

  1. 查閱API
  2. 快速定型API
  3. 確定一個例子,開始製作

例子中如果依賴一些公開庫。

注意:不要下載到本地然後引用

如果我們想分享程式碼給別人, 需要把所有我們下載的檔案也拷貝給別人, 尤其當依賴的公開庫多的情況下, 專案會變的很大, 上傳到版本控制系統也會變的很龐大。

我們通過其他方式來解決

  1. 使用cdn
  2. 使用前端自動化工具 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!');
});