Container element not found

[NinaP48]

Bonjour, j'essaie de visualiser une forme d'onde sonore à l'aide de wavesurfer. Cependant, rien n'est chargé en javascript sur ma page. Je n'arrive pas à résoudre ce problème.

Voici le code HTML :

<script src="https://unpkg.com/[email protected]/dist/wavesurfer.js"></script>
  <script src="index.js"></script>

WaveForm

<div id ="waveform"></div>

Et voici le code Javascript :

var wavesurfer = WaveSurfer.create({
container: "#waveform",
waveColor: 'violet',
progressColor: 'purple',
scrollParent: true
});

wavesurfer.load('ReveilDesOiseaux.wav');

wavesurfer.on('ready', function () {
wavesurfer.play();
});

[katspaugh]

Make sure your script is running after the document has loaded.
A common way to ensure this is to put the script to the bottom of your HTML.
Alternatively, you can wrap the wavesurfer init code into this:

window.addEventListener('DOMContentLoaded', () => {
  var wavesurfer = WaveSurfer.create({ ... })
})

[NinaP48]

J'ai effectué les modifications que vous me conseillez cependant, cela me génère une autre erreur :

Voici le code HTML :

<title>Maquette WaveForm</title>

WaveForm

<div id ="waveform"></div>

<script src="https://unpkg.com/[email protected]/dist/wavesurfer.js"></script> <script src="index.js"></script>

Voici le code javascript :

window.addEventListener('DOMContentLoaded', () => {
var wavesurfer = WaveSurfer.create({
container: "#waveform",
waveColor: 'violet',
progressColor: 'purple',
scrollParent: true
})
});

wavesurfer.load('ReveilDesOiseaux.wav');

wavesurfer.on('ready', function () {
wavesurfer.play();
});

Je m'excuse si je n'ai pas compris ce que vous m'avez indiqué, je débute totalement en javascript.

[katspaugh]

Das Problem ist, dass das wavesurfer.load auch im DOMContentLoaded sein muss, also:

window.addEventListener('DOMContentLoaded', () => {
  var wavesurfer = WaveSurfer.create({ ... })
  wavesurfer.load('ReveilDesOiseaux.wav');
})

Ich hoffe, dass es dir hilft! Viel Glück mit JavaScript.

[NinaP48]

Super, merci beaucoup
Maintenant je dois encore résoudre les problèmes avec les CORS ! :)

[katspaugh]

No problem!
Yeah, CORS won't work with file://. You need to run an HTTP server locally, or upload your audio file somewhere.

Btw, you seem to be using a rather old wavesurfer.js version. This will load the latest version (6.5.2):

<script src="https://unpkg.com/wavesurfer.js"></script>