<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <audio src="img/gaobaiqiqiu.mp3" controls="controls" ></audio> <!--<video width="800" src="img/shiping.mp4" controls="controls"></video>--> <!--<video src="img/shiping.mp4" controls="controls" width="600" height="" autoplay="autoplay" > --> <!--</video> -->--> <button class='fuge'>副歌</button> <button class="play">播放/暂停</button> <button class="muted">静音/不静音</button> <button class="sound">声音</button> <script type="text/javascript"> var a1 = document.querySelector('audio') //保证用户体验，要跟用户交互才能调用此功能 a1.autoplay = true; // a1.muted = true; document.querySelector('.play').onclick = function(){ if(a1.paused){ a1.play() }else{ a1.pause() } } document.querySelector('.fuge').onclick = function(){ a1.currentTime = 70 a1.play() } document.querySelector('.muted').onclick = function(){ // a1.muted = true if(a1.muted){ a1.muted = false }else{ a1.muted = true } } document.querySelector('.sound').onclick = function(){ if(a1.volume > 0.8){ a1.volume = 0.5 }else{ a1.volume = 0.2 } } </script> </body> </html>