Audio-Element nicht gültig

Question

Ich erstelle einen Audio-Player mit Visualizer. Aber zur Zeit, als ich den Eingang drücken Sie die Audio-Player kehrt meine Debug-Konsole zu starten:

Uncaught (in Versprechen) DOMException: Fehler geladen werden, da keine unterstützte Quelle gefunden wurde.

Was ich zur Zeit tun, ist das gesamte Audio-Element Einstellung in JS/jQuery up:

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

Der Strom in audio/mpeg-Format, es Last macht, wenn ich einfach ein Audio-Element erstellen in HTML mit einem src.

Kann mir jemand helfen, zu klären und die Lösung für die DOMException zu finden, die ich bekomme. Ich habe andere Fälle dieses Fehlers gesucht, aber die Korrekturen dort behebt das Problem nicht.

Answer 1

Versuchen Sie, die Audio-Tag wie folgt zu erstellen:

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

Und versuchen Sie die Einstellung der Art:

audio.type = "audio/mpeg"; 

denke ich, dass Ihr Problem zu beheben.

Dadurch wird ein Element erstellt, das mit dem Element identisch ist, das Sie in Ihrem Code verwenden. Ich schlage vor, Sie fügen eine Erweiterung in Ihren Stream ein.

Ich weiß, dass dieser Weg funktioniert, und ich weiß nicht, warum der andere Weg nicht geht.