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

该流采用audio / mpeg格式，当我使用src在HTML中创建一个音频元素时，它会加载。

有人可以帮助我澄清并找到我遇到的DOMException的解决方案。我一直在搜索此错误的其他案例，但修复程序并没有解决问题。

Answer 1

尝试创建如下音频标签：

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

尝试设置类型：

audio.type = "audio/mpeg";

我认为这样可以解决您的问题。

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

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

音频元素无效

1 个答案: