1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>radio语法笔记</title> 6 </head> 7 <body> 8 <button class="btn-play">播放</button> 9 <button class="btn-pause">暂停</button> 10 <button class="btn-gogo">快进</button> 11 <button class="btn-back">快退</button> 12 <button class="btn-volumeAdd">音量+</button> 13 <button class="btn-volumeMin">音量-</button> 14 <span class="newTime"></span> 15 <span class="allTime"></span> 16 <script> 17 audio = new Audio(); 18 audio.src = "data/imooc.mp3"; 19 var btnAudio = document.querySelector('.btn-play'); 20 var btnPause = document.querySelector('.btn-pause'); 21 btnAudio.onclick = function(){ 22 audio.play(); 23 } 24 btnPause.onclick = function(){ 25 audio.pause(); 26 } 27 var newTime = document.querySelector('.newTime'); 28 var allTime = document.querySelector('.allTime'); 29 audio.addEventListener('canplay',function(){ 30 allTime.innerHTML = audio.duration; 31 }) 32 setInterval(function(){ 33 newTime.innerHTML = parseInt(audio.currentTime); 34 },1000); 35 36 var gogo = document.querySelector('.btn-gogo'); 37 gogo.onclick = function(){ 38 audio.currentTime += 20; 39 } 40 41 var back = document.querySelector('.btn-back'); 42 back.onclick = function(){ 43 audio.currentTime -= 20; 44 } 45 46 var volumeAdd = document.querySelector('.btn-volumeAdd'); 47 var volumeMin = document.querySelector('.btn-volumeMin'); 48 //点击按钮加减音频音量到最小会出现bug什么意思？？？ 49 volumeAdd.onclick = function(){ 50 audio.volume >= 1 ? audio.volume = 1 : audio.volume = audio.volume + .1; 51 console.log(audio.volume); 52 } 53 volumeMin.onclick = function(){ 54 audio.volume <= 0 ? audio.volume = 0 : audio.volume = audio.volume - .1; 55 console.log(audio.volume); 56 } 57 </script> 58 </body> 59 </html>