Replies: 1 comment 5 replies
-
<div id="waveform">
<!-- the waveform will be rendered here -->
</div>
<script type="module">
import WaveSurfer from 'https://unpkg.com/wavesurfer.js@7/dist/wavesurfer.esm.js'
const wavesurfer = WaveSurfer.create({
container: '#waveform',
waveColor: '#4F4A85',
progressColor: '#383351',
url: '/audio.mp3'
})
wavesurfer.on('interaction', () => {
wavesurfer.play()
})
</script> |
Beta Was this translation helpful? Give feedback.
-
|
Thanks. I made the thread because that doesn't work and it is inscrutable to me. Sorry, I'm not a web developer. Here's what I did: I made an html file like this: Opening this file in a browser results in a blank screen. Can you dumb it down some more? |
Beta Was this translation helpful? Give feedback.
-
|
That looks correct. The audio is most likely not allowed to be fetched by JS from that site. |
Beta Was this translation helpful? Give feedback.
-
|
I can't get an audio file to play from any source, online or local. This includes mp3s and wavs in a cdn that I can get to play with a mouse rollover in another app. Do I need to change some setting somewhere? |
Beta Was this translation helpful? Give feedback.
-
|
CORS is something that the server that hosts the audio decides, you can't change it unless you control that server. You won't have these issues if you upload the audio file to the same site as the HTML. I'm afraid I can't help further. It's a JS library for devs, not a one-click service. I appreciate your interest and good luck with your research. |
Beta Was this translation helpful? Give feedback.
-
|
Okay I just tried with a file from my own site in the same directory and got it working. So thanks actually for your help, and good luck to you as well. |
Beta Was this translation helpful? Give feedback.
-
Hi, I want to use wavesurfer.js, but none of the examples I can find work.
Would it be possible to give an example of how to create an html page that incorporates a wavesurfer.js player that plays a publicly available audio file? Including all of the steps that need to be done, and settings, and CORS, or whatever that is?
The examples here didn't work for me: https://codepen.io/_kurene/pen/XWzBpWm, https://hassancorrigan.com/blog/create-a-soundcloud-audio-player-with-wavesurfer-js/
The example scripts on this site are just javascript chunks, apparently. I don't know how to use them in a webpage.
So please can someone provide a working example for people who are not javascript developers?
Thanks!
Beta Was this translation helpful? Give feedback.
All reactions