今天下午学了下audio玩,功能很简单,主要就是通过键盘来控制音乐播放。 HTML:<html><head><title>HTML5</title></head><body><audio><sourcesrc="枫.ogg"type="a

今天下午学了下audio玩,功能很简单,主要就是通过键盘来控制音乐播放。

HTML5之audio:键盘控制音乐播放(html audio 设置 音频)  HTML5之audio:键盘控制音乐播放 第1张

 

HTML:

<html><head><title> HTML5 </title></head><body><audio ><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);};

  

  

转载请说明出处
知优网 » HTML5之audio:键盘控制音乐播放(html audio 设置 音频)

发表评论

您需要后才能发表评论