wavesurfer.js: Unable to load audio from video tag

Hey, thank you for testing and contributing to wavesurfer.js!

Please make sure you can check all of these points below before opening an issue:

(You don’t have to post this section)

I have checked the FAQ and it doesn’t solve my problem.
I have checked the documentation and it doesn’t solve my problem
I have searched for already open issues which desribe my problem.
The issue I’m having is related to and caused by wavesurfer.js, not by other software (which maybe packages and uses wavesurfer incorrectly) – In that case you should open the issue on the respective project pages.

Please make sure you provide the following information (if applicable):

Wavesurfer.js version(s):

3.0.0
3.1.0

Browser and operating system version(s):

Chrome 77.0.3865.90 macOS Mojave 10.14.6

Code needed to reproduce the issue:

https://codepen.io/qbunt/pen/GRKVBrd

let wavesurfer = WaveSurfer.create({
          container: document.querySelector('#waveform'),
          waveColor: '#A8DBA8',
          progressColor: '#3B8686',
          backend: 'MediaElement'
})
let video = document.querySelector('video')
wavesurfer.load(video)

Use behaviour needed to reproduce the issue:

I originally encountered this in Vue, but have since validated that it shows up in all contexts and is not related to Vue at all. When attempting to start WaveSurfer with a MediaElement backend, and load a video element as the audio source, as shown in the docs, I get the following error consistently in every framework, and back to 3.0.0:

Uncaught Error: fetch url missing
    at Object.t.default (fetch.js:118)
    at t.value (wavesurfer.js:1448)
    at t.value (wavesurfer.js:1398)
    at t.value (wavesurfer.js:1322)
    at pen.js:11

Either this is something incorrect in the documentation, or something in Chrome changed and the URL isn’t landing in the fetch call due to an incorrect reference or similar.

Of course, if this is something obvious that I’m doing wrong, I’d be happy to update the docs if that is the issue. Thanks so much, great lib!

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 2
Comments: 15 (4 by maintainers)

Most upvoted comments

@aburai Do you know off-hand if the spectrogram plugin will load video as an audio element properly? I have the waveform working, the spectrogram plugin is throwing an error because it would appear that the backend (of MediaElement type`) does not have a buffer attached to the instance.
wavesurfer.spectrogram.js?e59a:609 Uncaught TypeError: Cannot read property 'getChannelData' of null
    at SpectrogramPlugin.getFrequencies (wavesurfer.spectrogram.js?e59a:609)
    at SpectrogramPlugin.render (wavesurfer.spectrogram.js?e59a:574)
    at t.SpectrogramPlugin._onReady (wavesurfer.spectrogram.js?e59a:470)
    at n (wavesurfer.min.js?b9b7:6)
    at eval (wavesurfer.min.js?b9b7:6)
    at Array.forEach (<anonymous>)
    at t.value (wavesurfer.min.js?b9b7:6)
    at t.eval (wavesurfer.min.js?b9b7:6)
    at n (wavesurfer.min.js?b9b7:6)
    at eval (wavesurfer.min.js?b9b7:6)
Which leads to:
value: function getFrequencies(callback) {
      var fftSamples = this.fftSamples;
      var buffer = this.buffer = this.wavesurfer.backend.buffer;
      var channelOne = buffer.getChannelData(0);
      var bufferLength = buffer.length;
      var sampleRate = buffer.sampleRate;
      var frequencies = [];
After setting some breakpoints, it looks like buffer, this.buffer and this.wavesurfer.backend.buffer are all null.

I ran into this same issue

davegravy on Jan 3, 2020

@qbunt @aburai What can I do for this? let wavesurfer = WaveSurfer.create({ container: document.querySelector(‘#waveform’), waveColor: ‘#A8DBA8’, progressColor: ‘#3B8686’, backend: ‘MediaElement’ }) let video = document.querySelector(‘video’) wavesurfer.load(video)

When attempting to start WaveSurfer with a MediaElement backend, and load a video element as the audio source, as shown in the docs, I get the following error consistently in every framework:

Uncaught Error: fetch url missing at Object.t.default (fetch.js:118) at t.value (wavesurfer.js:1448) at t.value (wavesurfer.js:1398) at t.value (wavesurfer.js:1322) at pen.js:11

purva15 on Feb 23, 2022

I have <source> as an extra element underneath video as the spec allows for. If I adhere to this to allow for multiple sources, then I get the above failure. If the src attribute is attached to the <video> tag itself, it does work correctly after the audio context is defined.

qbunt on Oct 2, 2019

@aburai Do you know off-hand if the spectrogram plugin will load video as an audio element properly? I have the waveform working, the spectrogram plugin is throwing an error because it would appear that the backend (of MediaElement type`) does not have a buffer attached to the instance.

wavesurfer.spectrogram.js?e59a:609 Uncaught TypeError: Cannot read property 'getChannelData' of null
    at SpectrogramPlugin.getFrequencies (wavesurfer.spectrogram.js?e59a:609)
    at SpectrogramPlugin.render (wavesurfer.spectrogram.js?e59a:574)
    at t.SpectrogramPlugin._onReady (wavesurfer.spectrogram.js?e59a:470)
    at n (wavesurfer.min.js?b9b7:6)
    at eval (wavesurfer.min.js?b9b7:6)
    at Array.forEach (<anonymous>)
    at t.value (wavesurfer.min.js?b9b7:6)
    at t.eval (wavesurfer.min.js?b9b7:6)
    at n (wavesurfer.min.js?b9b7:6)
    at eval (wavesurfer.min.js?b9b7:6)

Which leads to:

value: function getFrequencies(callback) {
      var fftSamples = this.fftSamples;
      var buffer = this.buffer = this.wavesurfer.backend.buffer;
      var channelOne = buffer.getChannelData(0);
      var bufferLength = buffer.length;
      var sampleRate = buffer.sampleRate;
      var frequencies = [];

After setting some breakpoints, it looks like buffer, this.buffer and this.wavesurfer.backend.buffer are all null.

qbunt on Oct 3, 2019

i look deeper in the code and in the example, loadElt does not what you want your play directs to loadMediaElement and this method already check if the argument is a string (url) or a media element and uses backend.loadElt)

i think we must add support for source tags there

aburai on Oct 2, 2019