音频元素无效

Question

我正在使用可视化工具创建音频播放器。 但目前当我按下输入启动音频播放器时，我的调试控制台返回：

Uncaught (in promise) DOMException: Failed to load because no 找到了支持的来源。

我目前正在做的是在 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";

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

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

我知道这种方式有效，但我不知道为什么其他方式无效。