html页面的音频问题

导火线 : 负责了项目中的话务间模块,处理音频出了一点问题

之前的处理 :

　　//循环播放声音

复制代码
var dialAudioDocument = document.createElement('audio');  //这是拨号的声音(这里只写了一个音频)
var dialSource = document.createElement('source');  
dialSource.type = "audio/mpeg";
dialSource.type = "audio/mpeg";
dialSource.autoplay = "autoplay";
dialSource.controls = "controls";
    　　　　

url : 表示音频路径,flag : 一个标识,来电还是拨出,audio : 表示上面的dialAudioDocument, source : 上面的dialSource
function playAudio(url, flag, audio, source) {
  console.log(url);　　　　注 : 这个的音频要借助source才能播放,并且没有方法让他停止(原因不详)
  console.log(flag);
  console.log(audio);
  console.log(source);
  source.src = url;
  audio.appendChild(source);
  audio.play();
  if (flag == "dial") {
    dialAlert = setTimeout("playAudio('" + url + "','dial', '"+audio+"', '"+source+"')", 1000*5);
  }
  if (flag == "call") {
    callAlert = setTimeout("playAudio('" + url + "','call', '"+audio+"', '"+source+"')", 1000*29);
  }
}
// 缺点:由于没有方法让音频停止,这时候只能选取时间短的音频进行循环播放,停止则通过clearInter..的方式停止,而后面换了音频,就不行了.....
复制代码

当时的小demo : (测试此音频方法是否管用)

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
     
</head>
 
<body>
  <script>
    var t;
    function play2(url){
        var audio = document.createElement('audio');
        var source = document.createElement('source');  
        source.type = "audio/mpeg";
        source.type = "audio/mpeg";
        source.src = url;  
        source.autoplay = "autoplay";
        source.controls = "controls";
        audio.appendChild(source);
        audio.play();
        t = setTimeout("play2('"+url+"')",2000);
         
    }
    function aa(){
        console.log(t);
        clearTimeout(t);
        console.log(t);
        clearTimeout(t);
    }
 
  
  </script>
  
  <input type="button" value="播放" onclick="play2('http://down.chinatcc.com/TW_Call_Disconnect.ogg')" />
  <input type="button" value="停止" onclick="aa();" />
</body>
     
</html>

　　

　　

目前的方案:

　　

复制代码


<!-- 下面是存放录音 -->
<audio id="dialAudio" src="/static/audio/dialAudio.mp3"></audio>
<audio id="callAudio" src="/static/audio/callAudio.mp3"></audio>
<audio id="hangAudio" src="/static/audio/hangAudio.mp3"></audio>




$(function () {
	//初始化录音标签
  dialAudioDocument = document.getElementById('dialAudio');  //这里只能有document得到,原因不详,猜想可能是加载顺序问题
  callAudioDocument = document.getElementById('callAudio');
  hangAudioDocument = document.getElementById('hangAudio');



//循环播放声音
function playAudio(document, flag) {
  console.log(document);
  document.currentTime = 0;
  document.play();
  if (flag == "dial") {
    dialAlert = setTimeout("playAudio('" + document + "','dial')", 1000*5);
  }
  if (flag == "call") {
    callAlert = setTimeout("playAudio('" + document + "','call')", 1000*29);
  }
}



//停止掉声音
function pauseAudio(document, flag){
	if (flag == "dial") {
		document.pause();
	}
	if (flag == "call") {
		document.pause();
	}
}


优点:解决了上述的缺点


复制代码


 


　　花时间记录,远大于死敲


　　







            

            
posted @ 
 
李勇888 
阅读(232) 
评论(0) 
编辑 
收藏 
举报


        

	    
	    
    









    
    

    
    



    

        
    

        

            
                
                
            
        

    

编辑推荐：



· AI与.NET技术实操系列：基于图像分类模型对图像进行分类
    

· go语言实现终端里的倒计时
    

· 如何编写易于单元测试的代码
    

· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
    

· .NET Core 中如何实现缓存的预热？
    



    

    阅读排行：
    

 ·          25岁的心里话
        

 ·          基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
        

 ·          闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
        

 ·          一起来玩mcp_server_sqlite，让AI帮你做增删改查！！
        

 ·          零经验选手，Compose 一天开发一款小游戏！
        



    

    



	

	

	
	

	

	

	





    

    
    








  

  
点击右上角即可分享

  微信分享提示