オーディオ要素が無効です

Question

私はビジュアライザーでオーディオプレーヤーを作成しています。 しかし、現在、私はオーディオプレーヤーに私のデバッグコンソールのリターンを開始するために入力を押したとき：

キャッチされない（約束で）のDOMException：なし サポートされているソースが見つからなかったため、ロードに失敗しました。

私は現在、JS/jQueryの中で全体のaudio要素を設定されてやってる：

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形式である、それがないの負荷を私は単にオーディオ要素を作成するときHTMLでsrcを使用します。

誰かが明らかにして、私が得るDOMExceptionの解決策を見つけるのを助けることができますか？私はこのエラーの他のケースを探していましたが、そこの修正が問題を解決しませんでした。私はそれがあなたの問題を解決すると思います

audio.type = "audio/mpeg"; 

：

Answer 1

は、このようなオーディオタグ作成してみてください：

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

をとタイプを設定してみてください。

これは、コードで使用する要素と同じ要素を作成します。 ストリームに拡張子を付けることをお勧めします。

私はこのように動作することを知っていますが、私はなぜ他の方法ではないのか分かりません。