音頻元素無效

Question

我用可視化工具創建了一個音頻播放器。 但目前當我按下輸入啓動音頻播放器我調試控制檯回報：

未捕獲的（以諾）拋出：DOMException：無法加載，因爲沒有 支持的源被發現。

什麼我目前做的是設置在整個音頻元素起來JS/jQuery的：

var bins = 512; 
var backgroundColour = "#2C2E3B"; 
var barColour = "#EC1A55"; 
var floorLevel = 32; 

var audioContext; 
var audioBuffer; 
var audioAnalyserNode; 
var initialized = false; 
var songText = ""; 
var textSize; 
var freqLookup = []; 
var canvasContext; 
var isStream = true; 
var canvasWidth; 
var canvasHeight; 
var src; 

var audioElement; 
var isPlaying = false; 
var volume = 1; 

function play() { 

    audioElement = document.createElement('audio'); 

    // Opus support check stuff 
    var streamEndpoint = 'http://**.**.**.**:8003/stream'; 
    var canPlayOpus = (typeof audioElement.canPlayType === "function" && audioElement.canPlayType('audio/ogg; codecs="opus"') !== ""); 
    if(volume > 1) { 
     volume = volume/100; 
    } 

    audioElement.src   = streamEndpoint; 
    audioElement.crossOrigin = 'anonymous'; 
    audioElement.volume  = volume; 
    audioElement.play(); 

    isPlaying = true; 
    setUpCanvas(audioElement); 
} 

function pause() { 

    audioElement.pause(); 
    audioElement.currentTime = 0; 
    audioElement.src = ''; 
    isPlaying = false; 
} 

function setUpCanvas(audioElement){ 
    try { 
     initCanvas(document.getElementById("canvas")); 
     if(typeof audioContext === 'undefined') { 
      audioContext = new AudioContext(); 
     } 
     if (audioElement) { 
      isStream = true; 
      setupAudioApi(true, audioElement); 
     } 
    } catch(e) { 
     console.log(e); 
    } 
} 

function setupAudioApi(isStream, audioElement) { 
    //var src; 
    if (isStream){ 
     if(typeof src === 'undefined'){ 
      src = audioContext.createMediaElementSource(audioElement); 
      audioContext.crossOrigin = "anonymous"; 
      audioAnalyserNode = audioContext.createAnalyser(); 
      audioAnalyserNode.fftSize = bins * 4; 
      src.connect(audioAnalyserNode); 
      audioAnalyserNode.connect(audioContext.destination); 
     } 
    } 

    if (!isStream) { 
     src.start(); 
    } 
    initialized = true; 
    initFreqLookupTable(); 
} 

function initCanvas(canvasElement) { 
    canvasContext = canvasElement.getContext('2d'); 
    canvasElement.width = canvasElement.clientWidth; 
    canvasElement.height = canvasElement.clientHeight; 
    canvasWidth = canvasElement.width; 
    canvasHeight = canvasElement.height; 
    requestAnimationFrame(paint); 
} 

function getFreqPoint(start, stop, n, binCount) { 
    return start * Math.pow(stop/start, n/(binCount - 1)); 
} 

function initFreqLookupTable() { 
    var lastPoint = 0; 
    var bins = audioAnalyserNode.frequencyBinCount; 
    for(var i = 0; i < bins/2; i++) { 
     //Scale to perceived frequency distribution 
     var newFreq = getFreqPoint(20, 20000, i * 2, bins); 
     var point = Math.floor(bins * newFreq/20000); 
     while (point <= lastPoint) { 
      point++; 
     } 
     lastPoint = point; 
     freqLookup.push(point); 
    } 
} 

//Render some fancy bars 
function paint() { 
    requestAnimationFrame(paint); 

    if(!initialized) { 
     alert('Er is iets fout gegaan'); 
     return false; 
    } 
    canvasContext.clearRect(0, 0, canvasWidth, canvasHeight); 
    canvasContext.fillStyle = backgroundColour; 
    canvasContext.fillRect(0, 0, canvasWidth, canvasHeight); 

    var bins = audioAnalyserNode.frequencyBinCount; 
    var data = new Uint8Array(bins); 
    audioAnalyserNode.getByteFrequencyData(data); 
    canvasContext.fillStyle = barColour; 

    for(var i = 0; i < bins; i++) { 
     var point = freqLookup[i]; 
     //Pretty much any volume will push it over 128 so we set that as the bottom threshold 
     //I suspect I should be doing a logarithmic space for the volume as well 
     var height = Math.max(0, (data[point] - floorLevel)); 
     //Scale to the height of the bar 
     //Since we change the base level in the previous operations, 256 should be changed to 160 (i think) if we want it to go all the way to the top 
     height = (height/(256 - floorLevel)) * canvasHeight * 0.8; 
     var width = Math.ceil(canvasWidth/((bins/2) - 1)); 
     canvasContext.fillRect(i * width, canvasHeight - height, width, height); 
    } 
} 

流是音頻/ MPEG格式，它負載時，我簡單地創建一個音頻元素在帶有src的HTML中。

有人可以幫我澄清並找到我得到的DOMException的解決方案。我一直在尋找這個錯誤的其他情況，但修復那裏沒有解決問題。

Answer 1

嘗試建立音頻標籤是這樣的：

var audio = new Audio('audio_file.mp3'); 

並嘗試設置類型：

audio.type = "audio/mpeg"; 

我認爲這將解決您的問題。

這會創建一個元素，與您在代碼中使用的元素相同。 我建議你在你的流上加一個擴展名。

我知道這種方式的作品，我不知道爲什麼其他方式沒有。