一個audio物件就是普通的dom物件 比其他的dom物件多出一些自己獨有的屬性方法和事件,下面介紹一下他常用的屬性、方法和事件

自己初步接觸html5的新屬性audio物件，做的一個簡易的音樂播放器，大家有興趣可以檢視，一起討論學習，有些功能尚未完善。。。敬請諒解！

//Audio的程式碼格式
<audio id="audio">  
  <source src="music/only.mp3"/>  
</audio  >

  //獲取audio物件
  var audio =  $('audio').get(0);

Audio物件的屬性

Audio物件的方法

Audio物件的事件

事件驅動的程式設計模式

// 這裡只設置資料
  $('音量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!');
});