有一些朋友想让网页更加的完美高端,所以想要加入一些音乐的元素。对于音乐元素来说,bgsound标签大家应该都很熟悉, 就这样一段代码可能就完成整个页面的音乐效果。但不足的是无法控制它的暂停或开始,加入网页后,即使浏览者想关闭,也无法完成操作。这让本来的目的变得有些不人性化。为了弥补这缺陷,写了一小段代码来控制网页音乐的播放暂停重播。由于用的是html5+js,所以太低版本的浏览器会出现不兼容的现象。需要引入一个 MP3,把b mp3给替换了。

  1. <!DOCTYPE HTML>  
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8">  
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">  
  6. <title></title>  
  7. </head>  
  8.   
  9. <body>  
  10. 音乐  
  11. <audio src="b.mp3" controls="controls" preload id="music1" hidden> </audio>  
  12. <span id="bf" onclick="bf();">播放/暂停</span> <span id="bf" onclick="rbf();">重新播放</span>   
  13. <script>  
  14.     function rbf(){  
  15.         var audio = document.getElementById('music1');  
  16.         audio.currentTime = 0;  
  17.     }  
  18.     function bf(){  
  19.         var audio = document.getElementById('music1');  
  20.         if(audio!==null){  
  21.             //检测播放是否已暂停.audio.paused 在播放器播放时返回false.  
  22.             alert(audio.paused);  
  23.             if(audio.paused)                     {  
  24.                 audio.play();//audio.play();// 这个就是播放  
  25.             }else{  
  26.                 audio.pause();// 这个就是暂停  
  27.             }  
  28.         }  
  29.     }  
  30.   
  31. </script>  
  32. </body>  
  33. </html>  

 

返回顶部