HTML5之audio:键盘控制音乐播放
2012-06-24 18:17
573 查看
今天下午学了下audio玩,功能很简单,主要就是通过键盘来控制音乐播放。
HTML:
JavaScript:
HTML:
<html> <head> <title> HTML5 </title> </head> <body> <audio id="audio" controls="controls"> <source src="枫.ogg" type="audio/ogg"></source> <source src="枫.mp3" type="audio/mp3"></source> </audio> <script type="text/javascript" src="html5.js"></script> </body> </html>
JavaScript:
var audio = document.getElementById('audio'); audio.play(); document.body.onkeyup = function(e){ //亦可绑定到audio,当鼠标点击到audio之后再按键可触发 var event = e || window.event; console.log('keyCode : ' + event.keyCode); console.log('volume : ' + audio.volume); if(!arguments.callee.pause){ arguments.callee.pause = false; } if(event.keyCode == 40){ //下 try { audio.volume -= 0.1; }catch(e){ console.log('audio.volume is already the smallest : ' + audio.volume); } }else if(event.keyCode == 38){ //上 try { audio.volume += 0.1; }catch(e){ console.log('audio.volume is already the largest : ' + audio.volume); } }else if(event.keyCode == 39){ //右 audio.currentTime += 10; }else if(event.keyCode == 37){ //左 audio.currentTime -= 10; }else if(event.keyCode == 32){ if(!arguments.callee.pause){ arguments.callee.pause = true; audio.pause(); }else{ arguments.callee.pause = false; audio.play(); } } console.log('currentTime : ' + audio.currentTime); };
相关文章推荐
- Js控制HTML5 Audio 音乐播放和关闭
- HTML5 Audio中控制音乐暂停、播放的js
- HTML5 Audio时代的MIDI音乐文件播放
- 在iOS微信浏览器中自动播放HTML5 audio(音乐)的2种正确方式
- HTML5 Audio时代的MIDI音乐文件播放
- ios vue2.0使用html5中的audio标签不能播放音乐
- HTML5 Audio 本地音乐播放并显示频谱
- HTML5开发,audio 控制,当单个音频播放的时候,其它音频保持暂停状态,避免重音
- html5 audio 音乐自动播放,循环播放等
- html5 audio标签切换播放音乐的方法
- 在 iOS Safari 中假装自动播放 HTML5 audio(音乐) 的正确方式
- 【html5 audio】音乐播放,灵动的音符效果 分类: HTML5 audio 播放音乐 效果 2014-12-31 15:45 422人阅读 评论(0) 收藏
- 微信小程序之音乐控制播放(audio的API)
- 【html5 audio】音乐播放,灵动的音符效果
- html5 Audio音乐播放器(canvas圆形音乐播放进度条)(一)
- Html5 audio标签实现音乐播放
- JS 控制 audio 标签 播放/暂停 音乐
- HTML5 audio 微信中自动播放音乐
- html5 video,audio控制播放多次,请求/监测全屏状态
- HTML5 audio标签使用js进行播放控制实例