H5的audio对象,这些知识你了解吗?
来源:互联网 发布:网络日语培训班 编辑:程序博客网 时间:2024/06/07 23:51
一个audio对象就是普通的dom对象 比其他的dom对象多出一些自己独有的属性方法和事件,下面介绍一下他常用的属性、方法和事件
自己初步接触html5的新属性audio对象,做的一个简易的音乐播放器,大家有兴趣可以查看,一起讨论学习,有些功能尚未完善。。。敬请谅解!
//Audio的代码格式<audio id="audio"> <source src="music/only.mp3"/> </audio >
//获取audio对象 var audio = $('audio').get(0);
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 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!');});
1 0
- H5的audio对象,这些知识你了解吗?
- .Net 乱记,这些知识你了解吗?
- 成为用户体验设计师,这些知识你了解吗?
- H5你真的了解吗?
- 这些声明的知识,你知道吗?
- 看看这些知识你掌握多少?你对JAVA了解吗?
- 都2017年了,H5这些知识你还不知道?(附H5案例介绍)
- 云存储对象存储管理与安全的知识你真的都了解吗?
- 这些PDF文档类型你了解吗?
- 这些网络概念你都了解吗?
- 这些PDF文档类型你了解吗?
- 关于PDF格式?你了解这些吗
- 【面向对象】这些基本概念,你都了解了吗(上)
- 【面向对象】这些基本概念,你都了解了吗(下)
- H5系列之“神测试,这些你看过的《还珠格格》”
- 这些继承知识你都知道吗?
- Java这些冷知识你知道吗?
- Java这些冷知识你知道吗?
- Git权威指南--改变历史
- CentOS7安装 Tomcat 8 完整步骤
- 2017.2.6测试总结
- android Animation 对Android动画的理解
- FragmentPagerAdapter与FragmentStatePagerAdapter区别
- H5的audio对象,这些知识你了解吗?
- C#中取整函数
- java多线程编程-ReentrantReadWriteLock笔记
- source insight macro自动创建代码
- Web高级征程:《大型网站技术架构》读书笔记系列
- 面试说这些话还想通过?天真!
- Python快速排序的两种实现和比较
- POJ3264-Balanced Lineup
- 【书山有路】软件测试的艺术第3章