音频元素无效

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"; 

我认为这将解决您的问题。

这会创建一个元素，与您在代码中使用的元素相同。 我建议你在你的流上加一个扩展名。

我知道这种方式的作品，我不知道为什么其他方式没有。