Tutorial on plugins #3546

IVPENAS · 2024-02-09T18:21:57Z

IVPENAS
Feb 9, 2024

Im quite new on this platform, and was able to do the basic codes about the wave and i plan to add some plugins yet i dont know how to import using UML (<script>) nor properly applying it and i tried my best to learn from the docus yet no avail. Any tips and tricks how to be able to use plugins

Answered by katspaugh

Feb 10, 2024

I think teaching people how to insert script tags is a little bit outside of the scope of this project. There are examples for both UMD and ESM tags in the readme, and plenty of tutorials on JavaScript on the internet. Not to mention multiple examples of plugin usage on the website. E.g. https://wavesurfer.xyz/examples/?minimap.js

View full answer

katspaugh · 2024-02-10T07:00:55Z

katspaugh
Feb 10, 2024
Maintainer

I think teaching people how to insert script tags is a little bit outside of the scope of this project. There are examples for both UMD and ESM tags in the readme, and plenty of tutorials on JavaScript on the internet. Not to mention multiple examples of plugin usage on the website. E.g. https://wavesurfer.xyz/examples/?minimap.js

5 replies

IVPENAS Feb 23, 2024
Author

For some reason that the timelineplugin is not defined or cannot be read

where as my code in main.js are:

const audioTrack = WaveSurfer.create({
  container: '.audio',
  waveColor: '#eee',
  progressColor: 'red',
  url: '/audio.mp3',
  barWidth: 0,
  minPxPerSec: 100,
  plugins: [
    TimelinePlugin.create({
      container: '.wave-timeline',
    })
  ],
});

and importing of the wavesurfer itself in index.html

<body>
    <!-- Wave Output -->
    <div class="audio"></div>
    <div id="wave-timeline"></div>
    
    <script src="https://unpkg.com/wavesurfer.js@7"></script>
    <script src="https://unpkg.com/wavesurfer.js@7.7.3/dist/plugins/timeline.min.js"></script>
    <script type="module" src="main.js"></script>
</body>

katspaugh Feb 24, 2024
Maintainer

It should be WaveSurfer.Timeline when using the min.js script. It's mentioned in the readme.

pavennt Mar 4, 2024

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WaveSurfer Example</title>
    <!-- Include WaveSurfer CSS -->
    <link rel="stylesheet" href="https://unpkg.com/wavesurfer.js/dist/wavesurfer.min.css">
</head>
<body>
    <!-- Your HTML content here -->
    <div id="waveform"></div>
    
    <!-- Include WaveSurfer JavaScript -->
    <script src="https://unpkg.com/wavesurfer.js"></script>
    <!-- Include WaveSurfer Regions plugin -->
    <script src="https://unpkg.com/wavesurfer.js@7"></script>
    <script src="https://unpkg.com/wavesurfer.js@7/dist/plugins/regions.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const wavesurfer = WaveSurfer.create({
                container: '#waveform',
                waveColor: 'violet',
                progressColor: 'purple',
                plugins: [
                    WaveSurfer.Regions.create() // Initialize regions plugin
                ]
            });

            // Load an audio file
            wavesurfer.load('./catdoi.mp3');

            // Create a region
            wavesurfer.on('ready', function () {
                wavesurfer.addRegion({
                    start: 2, // start time in seconds
                    end: 4, // end time in seconds
                    color: 'rgba(255, 0, 0, 0.3)' // region color
                });
            });
            // 
        });
    </script>
</body>
</html>

It not work please help me.

wlaskovic Apr 11, 2024

Is it the same for Hover, because I'm struggling to reach it like that. Every other package is reachable for me

katspaugh Apr 11, 2024
Maintainer

Should be the same, yes. WaveSurfer.Hover.

Navigation Menu

Uh oh!

Tutorial on plugins #3546

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment 5 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

Tutorial on plugins #3546

Uh oh!

IVPENAS Feb 9, 2024

Replies: 1 comment · 5 replies

Uh oh!

katspaugh Feb 10, 2024 Maintainer

Uh oh!

IVPENAS Feb 23, 2024 Author

Uh oh!

katspaugh Feb 24, 2024 Maintainer

Uh oh!

Uh oh!

pavennt Mar 4, 2024

Uh oh!

wlaskovic Apr 11, 2024

Uh oh!

katspaugh Apr 11, 2024 Maintainer

IVPENAS
Feb 9, 2024

Replies: 1 comment 5 replies

katspaugh
Feb 10, 2024
Maintainer

IVPENAS Feb 23, 2024
Author

katspaugh Feb 24, 2024
Maintainer

katspaugh Apr 11, 2024
Maintainer