//Audio Code Format
<audio id="audio">  
  <source src="music/only.mp3"/>  
</audio  >

  //Getting audio objects
  var audio =  $('audio').get(0);

Attributes of Audio Objects

Method of Audio Object

Events of Audio Objects

Event-driven programming mode

// Only data is set here.
  $('volume div').on('click',function(e){
    audio.volume = e.offsetX / e.offsetWidth;
  })
  // Here's the interface
  $('audio').on('volumechange',function(){
    let width = (this.currentTime/this.duration).toFixed(2)*100 + '%';
    $('volume div').find('.inner').width(width);
  }) 

Start project

General steps for using an HTML 5 module or other js plug-in

1. Consult API
2. Rapid stereotyping API
3. Identify an example and start making

In the example, if you depend on some public libraries.

Note: Do not download to local and then reference

If we want to share code with others, we need to copy all the files we downloaded to others. Especially when there are many public libraries to rely on, the project will become very large and the upload to version control system will become very large.

We solve it in other ways.

1. Using cdn
2. Use the front-end automation tool bower

bower init
bower install jquery --save

A. bower file will be generated so that anyone who gets the project and runs the bower install will download all the dependency libraries.

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

Recursive traversal of folders

var fs   = require('fs');
var childProcess = require('child_process');

// Recursive traversal of folders callback each of them
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+'/' ) ;
    }
  }
};

// Traverse. / Music folder to call ffprobe to parse music data
var fileExtension = ['mp3', 'wav'];
var database = [];
walk('./musics/', function(name, path){
  var extName = name.split('.').pop();
  if( fileExtension.indexOf(extName) !== -1 ){
    // This doesn't work under 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 );
  }
});

// Write to js file
var js =  'var database = ' + JSON.stringify(database, null, 4);
fs.writeFile('./scripts/database.js', js, function (err) {
  if (err){
    throw err;
  }
  console.log('saved!');
});