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插件的一般步骤
 
查阅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!');
                    一个audio对象就是普通的dom对象 比其他的dom对象多出一些自己独有的属性方法和事件,下面介绍一下他常用的属性、方法和事件自己初步接触html5的新属性audio对象，做的一个简易的音乐播放器，大家有兴趣可以查看，一起讨论学习，有些功能尚未完善。。。敬请谅解！模拟音乐播放器//Audio的代码格式&amp;lt;audio id=&quot;audio&quot;&amp;gt;    &amp;lt;s...
audioTracks 返回表示可用音频轨道的 AudioTrackList 对象。 
autoplay    设置或返回是否在就绪（加载完成）后随即播放音频。 
buffered    返回表示音频已缓冲部分的 TimeRanges 对象。 
controller  返回表示音频当前媒体控制器的 MediaController 对象。 
controls
音乐播放过程中，切换到应用其他页面时，用后台的状态栏切换音乐时音乐会暂停。
问题分析：
华为audio接口只能在页面中使用，当audio所在的页面退出后，页面销毁，绑定的上下文对象也随之不存在。 此时，在通知栏上一首、下一首切换歌曲时，后台播放服务首先暂停当前歌曲，状态重置，但是audio接口的绑定事件找不到上下文对象，无法触发previous和next事件，导致上述现象。
解决方案:
在应用首页监听audio事件，而不仅仅是在播放页面添加，当用户离开播放页面时，依然可以监听到audio的每个事
客户要求完成音频生成之后，如果退出当前页面，则将后端生成的音频删除；
前端加载audio标签之后，然后退出，调用后端删除音频接口，此时后端调用file.delete会返回false，删除失败；
问题排查：
由于前端加载audio的时候，会去获取播放的文件流，但是前端audio标签是分成两段加载流，第一段获取音频头文件，第二段才是获取音频内容。所以当加载完音频，但是未播放时，http连接会保持，直到音频主体传送完成
此时问题便发生了：未播放音频，但是退出，删除音频会导致文件无法删除；
				
参考W3C详细文档：http://www.w3school.com.cn/jsref/dom_obj_audio.asp
pause()方法只是暂停，这里重新load之后，再次play，音乐可重头播放
DOCTYPE html>
    meta charset="utf-8">
    title>testtitle>
    script language
				
http://msdn.microsoft.com/zh-CN/ie/hh377903
HTML5 展示网站： http://www.beautyoftheweb.com/
HTML5资讯： http://www.mhtml5.com/
各种声音构成了我们的生活背景。现在，