HTML5 - 使用JavaScript控制[audio]音频的播放
html5 2017-10-09 17:32:28

 1，通过JavaScript控制页面上的播放器

比如把页面上添加一个<audio>用来播放背景音乐（由于controls属性未设置，我们是看不见播放界面的）

XML/HTML Code复制内容到剪贴板
  1. <audio id="bgMusic">  
  2.     <sourcesource = src="music.mp3" type="audio/mp3">  
  3.     <sourcesource = src="music.ogg" type="audio/ogg">  
  4. </audio>  

通过pause()和play()方法可以使音乐暂停和继续播放（结合currentTime属性可以实现停止和重新播放）

JavaScript Code复制内容到剪贴板
  1. var audio = document.getElementById("bgMusic");  
  2.    
  3. //播放(继续播放)  
  4. audio.play();  
  5.    
  6. //暂停  
  7. audio.pause();  
  8.    
  9. //停止  
  10. audio.pause();  
  11. audio.currentTime = 0;  
  12.    
  13. //重新播放  
  14. audio.currentTime = 0;  
  15. audio.play();  

 

2，也可以动态的创建<audio>元素

JavaScript Code复制内容到剪贴板
  1. //方式1  
  2. var audio = document.createElement("audio");  
  3. audio.src = "music.mp3";  
  4. audio.play();  
  5.    
  6. //方式2  
  7. var audio = new Audio("music.mp3");  
  8. audio.play();  

通过canPlayType()方法可以判断浏览器支持的编码方式，从而设置对应的音频文件

JavaScript Code复制内容到剪贴板
  1. if (audio.canPlayType("audio/mp3")) {  
  2.     audio.src = "music.mp3";  
  3. }else if(audio.canPlayType("audio/ogg")) {  
  4.     audio.src = "music.ogg";  
  5. }  

 

 

XML/HTML Code复制内容到剪贴板
  1. <script>  
  2.   
  3.     var audio;  
  4.     window.onload = function() {  
  5.         initAudio();  
  6.     }  
  7.     var initAudio = function() {  
  8.         //audio =  document.createElement("audio")  
  9.         //audio.src='Never Say Good Bye.ogg'  
  10.         audio = document.getElementById('audio');  
  11.     }  
  12.   
  13.     function getCurrentTime(id) {  
  14.         alert(parseInt(audio.currentTime) + '：秒');  
  15.     }  
  16.   
  17.     function playOrPaused(id, obj) {  
  18.         if(audio.paused) {  
  19.             audio.play();  
  20.             obj.innerHTML = '暂停';  
  21.             return;  
  22.         }  
  23.         audio.pause();  
  24.         obj.innerHTML = '播放';  
  25.     }  
  26.   
  27.     function hideOrShowControls(id, obj) {  
  28.         if(audio.controls) {  
  29.             audio.removeAttribute('controls');  
  30.             obj.innerHTML = '显示控制框'  
  31.             return;  
  32.         }  
  33.         audio.controls = 'controls';  
  34.         obj.innerHTML = '隐藏控制框'  
  35.         return;  
  36.     }  
  37.   
  38.     function vol(id, type, obj) {  
  39.         if(type == 'up') {  
  40.             var volume = audio.volume + 0.1;  
  41.             if(volume >= 1) {  
  42.                 volume = 1;  
  43.   
  44.             }  
  45.             audio.volume = volume;  
  46.         } else if(type == 'down') {  
  47.             var volume = audio.volume - 0.1;  
  48.             if(volume <= 0) {  
  49.                 volume = 0;  
  50.             }  
  51.             audio.volume = volume;  
  52.         }  
  53.         document.getElementById('nowVol').innerHTML = returnFloat1(audio.volume);  
  54.     }  
  55.   
  56.     function muted(id, obj) {  
  57.         if(audio.muted) {  
  58.             audio.muted = false;  
  59.             obj.innerHTML = '开启静音';  
  60.         } else {  
  61.             audio.muted = true;  
  62.             obj.innerHTML = '关闭静音';  
  63.         }  
  64.     }  
  65.     //保留一位小数点  
  66.   
  67.     function returnFloat1(value) {  
  68.         value = Math.round(parseFloat(value) * 10) / 10;  
  69.         if(value.toString().indexOf(".") < 0) {  
  70.             valuevalue = value.toString() + ".0";  
  71.         }  
  72.         return value;  
  73.     }  
  74. </script>  
  75. 调用方式如下：  
  76.   
  77. <a href="javascript:void(0);" onclick="getCurrentTime('firefox');">获取播放时间</a>  
  78. <a href="javascript:void(0);" onclick="playOrPaused('firefox',this);">播放</a>  
  79. <a href="javascript:void(0);" onclick="hideOrShowControls('firefox',this);">隐藏控制框</a>  
  80. <a href="javascript:void(0);" onclick="muted('firefox',this);">开启静音</a>  
  81. <input type="button" value="+" id="upVol" onclick="vol('firefox' , 'up' , this )" />音量<input type="button" value="-" onclick="vol('firefox' , 'down' ,this )" />  
  82. <audio src="/images/audio/Never Say Good Bye.ogg" id="audio" controls="controls"></audio>  
  83.   
  84. 当前音量：<span id="nowVol"> - </span>  

 

用html5的video方式播放视频时，在ipad上是默认原来大小的，而在iphone上是默认全屏播放的。
HTML里video必须加上webkit-playsinline属性

XML/HTML Code复制内容到剪贴板
  1. <video id="video" controls="controls" webkit-playsinline="true">  
  2. <source src="test.mp4" type="video/mp4" />  
  3. Your browser does not support HTML5 video.  
  4. </video>  

 

发现IOS加这个也不生效，改成这样：

XML/HTML Code复制内容到剪贴板
  1. <video controls="controls" width="100%" height="100%" id="myvideo" playsinline webkit-playsinline x-webkit-airplay x5-playsinline preload="auto">  

 

开发时遇见一个问题，宣传页面的视频在iPhone 6s plus 上无法播放，但其它几台正常，测试之下发现：ios10版本下，video标签 preload = 'none' 属性会让视频无法播放，改为 preload = 'auto' 即可； 

 

IOS的视频文件无法在ajax取得后重新赋值给source，所以将dom下的删除，再次写入一遍即可：

JavaScript Code复制内容到剪贴板
  1.             playVideo(source, ifAutoPlay = true) {  
  2.                 //播放视频，资源链接，是否自动播放，默认为是  
  3.                 this.playerShow = true;  
  4.                 this.$set(this,'playerSource',source);//定义路径  
  5. //              this.playerSource = source;  
  6.                 let dom = document.getElementById('myvideo');  
  7.         $(dom).find("source").remove();  
  8.         $(dom).append("<source src='"+source+"'></source>");  
  9.                 dom.load(); //重新加载  
  10.                 if(ifAutoPlay) {  
  11.                     dom.play(); // 开始播放  
  12.                 }  
  13.             },  

 

 

 

 

 

 

 

本文来自于：http://www.yoyo88.cn/study/html5/165.html

上一篇 html5——多图上传
下一篇 HTML 5 Web 存储 - localStorage / sessionStorage
相关的文章
Powered by yoyo苏ICP备15045725号