javascript - 音频元素无效

Question

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

Uncaught (in promise) DOMException: Failed to load because no supported source was found.

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

我认为这会解决你的问题。

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

我知道这种方法可行，但我不知道为什么其他方法不行。