Audio对象身上的属性方法和事件

一个audio对象就是普通的dom对象比其他的dom对象多出一些自己独有的属性方法和事件

  var audio =  $('audio').get(0);

属性

audio.volume

(读/写) 音量
audio.src

(读/写) 歌曲地址
audio.currentTime

(读/写) 歌曲当前已播放时长
audio.duration

(读) 歌曲的总长度
audio.paused

(读) 布尔类型是否处于暂停状态
audio.ended

(读) 布尔类型歌曲是否已经播放完毕

方法

audio.play()

让歌曲开始播放
audio.pause()

让歌曲暂停

事件

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);
  })

开始项目

使用一个hmtl5模块或其他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!');
});