码迷,mamicode.com
首页 > Web开发 > 详细

html页面的音频问题

时间:2017-11-30 20:13:03      阅读:224      评论:0      收藏:0      [点我收藏+]

标签:create   ...   doctype   title   timeout   audio   测试   javascrip   input   

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

之前的处理 :

  //循环播放声音

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 : (测试此音频方法是否管用)

<!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();
}
}

优点:解决了上述的缺点

 

  花时间记录,远大于死敲

  

html页面的音频问题

标签:create   ...   doctype   title   timeout   audio   测试   javascrip   input   

原文地址:http://www.cnblogs.com/liyong888/p/7930719.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!