html頁面的音頻問題

時間 2019-11-11

標籤 html 頁面音頻問題欄目 HTML 简体版

原文原文鏈接

導火線 : 負責了項目中的話務間模塊,處理音頻出了一點問題javascript

以前的處理 :html

　　//循環播放聲音java

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 : (測試此音頻方法是否管用)app

<!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>url

$(function () {
//初始化錄音標籤
dialAudioDocument = document.getElementById('dialAudio'); //這裏只能有document獲得,緣由不詳,猜測多是加載順序問題
callAudioDocument = document.getElementById('callAudio');
hangAudioDocument = document.getElementById('hangAudio');spa


//循環播放聲音
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();
}
}code