首页
站长论坛BBS
救助
投稿
discuz视频教程
discuz技术支持
版块
登录
快速注册

HTML5中使用js控制audio标签的方法

移动鬼影 2015-4-28 [HTML5] 来自PC 复制链接
55505
discuz使用视频教程
31idc

马上注册,一起探讨正确快速的建站方法

您需要 登录 才可以下载或查看,没有帐号?快速注册

x
<audio>标签可以在HTML5浏览器中播放音频文件。

<audio>默认提供一个控制面板,但是有些时候我们只需要播放声音,控制面板由我们自己来定义其显示的状态。

这里我们可以使用JS来进行控制,代码如下:
  1. var audio ;
  2. window.onload = function(){
  3.         initAudio();
  4. }
  5. var initAudio = function(){
  6.         //audio =  document.createElement("audio")
  7.         //audio.src='Never Say Good Bye.ogg'
  8.         audio = document.getElementById('audio');
  9. }
  10. function getCurrentTime(id){                       
  11.         alert(parseInt(audio.currentTime) + ':秒');
  12. }

  13. function playOrPaused(id,obj){
  14.         if(audio.paused){
  15.                 audio.play();
  16.                 obj.innerHTML='暂停';
  17.                 return;
  18.         }
  19.         audio.pause();
  20.         obj.innerHTML='播放';
  21. }

  22. function hideOrShowControls(id,obj){
  23.         if(audio.controls){
  24.                 audio.removeAttribute('controls');
  25.                 obj.innerHTML = '显示控制框'
  26.                 return;
  27.         }
  28.         audio.controls = 'controls';
  29.         obj.innerHTML = '隐藏控制框'
  30.         return;
  31. }
  32. function vol(id,type , obj){
  33.         if(type == 'up'){
  34.                 var volume = audio.volume  + 0.1;
  35.                 if(volume >=1 ){
  36.                         volume = 1 ;
  37.                
  38.                 }
  39.                 audio.volume =  volume;
  40.         }else if(type == 'down'){
  41.                 var volume = audio.volume  - 0.1;
  42.                 if(volume <=0 ){
  43.                         volume = 0 ;
  44.                 }
  45.                 audio.volume =  volume;
  46.         }
  47.         document.getElementById('nowVol').innerHTML = returnFloat1(audio.volume);
  48. }
  49. function muted(id,obj){
  50.         if(audio.muted){
  51.                 audio.muted = false;
  52.                 obj.innerHTML = '开启静音';
  53.         }else{
  54.                 audio.muted = true;
  55.                 obj.innerHTML = '关闭静音';
  56.         }
  57. }
  58. //保留一位小数点

  59. function returnFloat1(value) {   
  60.         value = Math.round(parseFloat(value) * 10) / 10;
  61.         if (value.toString().indexOf(".") < 0){
  62.                 value = value.toString() + ".0";
  63.         }
  64.         return value;
  65. }
复制代码

调用方式如下:

  1. <a href="javascript:void(0);" onclick="getCurrentTime('firefox');">获取播放时间</a>
  2. <a href="javascript:void(0);" onclick="playOrPaused('firefox',this);">播放</a>
  3. <a href="javascript:void(0);" onclick="hideOrShowControls('firefox',this);">隐藏控制框</a>
  4. <a href="javascript:void(0);" onclick="muted('firefox',this);">开启静音</a>
  5. <input type="button" value="+" id="upVol" onclick="vol('firefox' , 'up' , this )"/>音量<input type="button" value="-" onclick="vol('firefox' , 'down' ,this )"/>
  6. <audio src="/images/audio/Never Say Good Bye.ogg" id="audio" controls="controls" ></audio>
复制代码


当前音量:<span  id = "nowVol"> - </span>



上一篇:jQuery 效果 – 出现/消失 淡入淡出效果
下一篇:如何打造一款有吸引力的App应用?
糖糖悠 发表于 2015-6-9 13:21:16 来自PC
真是难得给力的帖子啊。
筱黑 发表于 2015-6-11 06:24:27 来自PC
这个不错,值得看一下!
zixun 发表于 2015-6-13 12:42:07 来自PC
极好  的  来学习的呢 嘻嘻嘻  点个赞
http://www.6061666.com/html/news
l8821686 发表于 2015-6-16 11:01:21 来自PC
赞!很好很强大!!!
您需要登录后才可以回帖 登录 | 快速注册

本版积分规则

快速回复 返回顶部 返回列表