Error: Unable to determine a compatible dataUri format for this browser.

[TrySpace]

Im using the standalone peaks.js file doing:

var Peaks = (peaks.js)
var p = Peaks.init({
        container: document.querySelector('#peaks-container'),
        mediaElement: document.querySelector('.peaks')
      });

On:

 <div class="player-container">
    <div id="peaks-container"></div>
      <audio class="peaks" controls>
        <source src="./test.mp3" type="audio/mpeg" />
      </audio>
  </div>

But get:

Uncaught Error: Unable to determine a compatible dataUri format for this browser. on line: 18405 of peaks.js

it throws on if (!uri) there

I understood that dataUri was optional?

I'm just trying to create a waveform in the browser..

[emupuya]

Hello have you found a solution to this error. I'm using Safari but i cant get it to display the waveform. But it works well in firefox.

[thom4parisot]

Hello,

since peaks@0.3.0 you can use Web Audio to generate the waveforms but since peaks@0.6.0 you now have to pass an AudioContext object (webkitAudioContext in the case of Safari).

See #167

[hamza-hajji]

I'm using React, and I initialized a Peaks.js instance in the componentDidMount and it gives me this same error for some reason.

Here's my initialization code.

componentDidMount() {
  this.peaksInstance = Peaks.init({
    audioContext: new AudioContext(), // For some reason, this doesn't work
    container: document.querySelector('#peaks-container'),
    mediaElement: document.querySelector('audio'),
    keyboard: true,
    pointMarkerColor: '#006eb0'
  });
}

and I render this

render() {
  return (
    <div>
      <div id="peaks-container">
      </div>
      <audio>
        <source src="../../my-audio.mp3" type="audio/mpeg" />
        Your browser does not support the audio element.
      </audio>
    </div>
  );
}

[nsarwar]

have we got any solution for this i am doing

var myAudioContext = new AudioContext();
        var options = {
            container: document.getElementById('first-waveform-visualiser-container'),
            mediaElement: document.querySelector('audio'),
            audioContext: myAudioContext,
            keyboard: true,
            pointMarkerColor: '#006eb0',
            showPlayheadTime: true
        };

so using audioContext instead of dataUri and getting this Unable to determine a compatible dataUri format for this browser in firefox in chrome its working

[hamza-hajji]

It actually does this for me in all browsers, not just in a particular one.

[chrisn]

Hi @nsarwar, what version of Peaks.js are you using? Your code works fine for me with the latest 0.9.5 release.

[nsarwar]

Hi @chrisn thanks for the reply i downloaded the code from here https://github.com/bbc/peaks.js/tree/master its changelog says its 0.9.5.Not sure what i am doing wrong here.

[chrisn]

I created a simple React app to investigate this issue, and indeed I see the same "Unable to determine a compatible dataUri format" error in both Chrome and Firefox.

But, the error only occurs if I use an <audio> element that contains a <source> element in the render() function:

<audio>
  <source src="example.mp3" type="audio/mpeg"/>
</audio>

The problem goes away if I change the HTML to use a src attribute instead:

<audio src="example.mp3" type="audio/mpeg">
</audio>

So, there are a couple of problems here:

1. There seems to be a race condition with the <audio> element's currentSrc attribute, as I get the right result in both cases when stepping through Peaks.js Waveform.getRemoteData() function in the debugger. I will look further into why it doesn't work when using a <source> element. I'm not sure if the issue is React-specific; I created a test page using Peaks.js only, and this worked OK. Also, the original bug report doesn't mention React.

2. The error message is misleading. The problem is unrelated to the dataUri parameter, which is only used to request precomputed waveform data files from the server, and isn't required when using the audioContext parameter to compute the waveform using the Web Audio API.

[nsarwar]

Hi @chrisn thank-you for the suggested fix i tried and it worked let me paste in my code.I was getting the audio file like this `

changing as suggested ` so definitely some issues with audio element's i guess.

[chrisn]

Fixed via https://github.com/bbc/peaks.js/commit/bca3df319c95cbebd7a3d6c24e773c2a540b8a4b and https://github.com/bbc/peaks.js/commit/a4f0c6b503cae6fd35ced538187f4416d4e96155, in release v0.9.6.