一个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插件的一般步骤
- 查阅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!');
});