WaveSurfer is not working #3161

webdevratnesh · 2023-09-04T06:24:57Z

webdevratnesh
Sep 4, 2023

Hi memebers,

I have copied code from :- https://wavesurfer-js.org/ and renamed the audio file name accordingly but wavesurfer is not working. what could be the possible reason.

Here's the SS of code and webpage:- https://prnt.sc/d--xHpw0aDnE

Please tell me what I am missing.

I have used below code:-

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <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: 'https://www.jekkna.com/wp-content/uploads/2023/08/Home-Audio-JEKKNA.mp3',
      })
      
      wavesurfer.on('interaction', () => {
        wavesurfer.play()
      })
      </script>
</body>
</html>

katspaugh · 2023-09-04T07:45:16Z

katspaugh
Sep 4, 2023
Maintainer

It won't work when opened as an HTML file via C:/Users/.... You need to run a local web server to serve your HTML.
Besides, loading just any audio from the Internet won't work either because of CORS. You need to either host the audio yourself or the server must support CORS.

2 replies

samp101 Jan 9, 2024

I am having cors issues when trying to load the waveSurfer.js waves. instead of enabling all cors is it possible to enable it that my server will allow wavesurfers IP address. If yes then what is the IP address?

katspaugh Jan 9, 2024
Maintainer

It's the domain (not IP) from which you serve your HTML.

webdevratnesh · 2023-09-04T10:41:38Z

webdevratnesh
Sep 4, 2023
Author

Thanks for your reply. My issue got resolved :)

…

On Mon, Sep 4, 2023 at 1:15 PM katspaugh ***@***.***> wrote: It won't work when opened as an HTML file via C:/Users/.... You need to run a local web server to serve your HTML. Besides, loading just any audio from the Internet won't work either because of CORS <https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS>. You need to either host the audio yourself or the server must support CORS. — Reply to this email directly, view it on GitHub <#3161 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AUFUS6YK7IEZOGQHBD3W6CLXYWBJPANCNFSM6AAAAAA4J5HTF4> . You are receiving this because you authored the thread.Message ID: ***@***.*** com>

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

WaveSurfer is not working #3161

Uh oh!

{{title}}

Uh oh!

Replies: 2 comments 2 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

WaveSurfer is not working #3161

Uh oh!

webdevratnesh Sep 4, 2023

Replies: 2 comments · 2 replies

Uh oh!

katspaugh Sep 4, 2023 Maintainer

Uh oh!

samp101 Jan 9, 2024

Uh oh!

katspaugh Jan 9, 2024 Maintainer

Uh oh!

webdevratnesh Sep 4, 2023 Author

webdevratnesh
Sep 4, 2023

Replies: 2 comments 2 replies

katspaugh
Sep 4, 2023
Maintainer

katspaugh Jan 9, 2024
Maintainer

webdevratnesh
Sep 4, 2023
Author