H5的audio对象，这些知识你了解吗？

2024-04-27 15:13:54

字体：大中小

来源：转载

供稿：网友

一个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使用前端自动化工具 bowerbower initbower 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');// 递归遍历文件夹对其中的每一个文件调用 callbackvar 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!');});

上一篇：原生js手写翻页效果

下一篇：JS将秒转换为天-时-分-秒