Audio visualizer support

Support
1

Hello

Does bitmovin have a visualizer for audio media? For example videojs has a plugin that adds a navigable waveform for audio and video files.

If bitmovin doesnt have support, what can be alternative solution to implement the same ?

Thanks

2

Hi,

I built a little demo showing how wavesurfer could potentially be integrated:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MP3 Player with Waveform</title>
    <!-- Include Wavesurfer.js CSS and JS -->

    <script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/7.4.6/wavesurfer.min.js"></script>
    <script src="//cdn.bitmovin.com/player/web/8/bitmovinplayer.js"></script>
</head>

<body>

    <h1>Bitmovin Player with Waveform</h1>
    <div id="waveform"></div>
    <div id="player"></div>

    <script>
        conf = {
            key: "YOUR_KEY_HERE"
        }

        player = new bitmovin.player.Player(document.getElementById('player'), conf);

        player.load({
            progressive: "YOUR_SOURCE_FILE.MP4" // MP4 or MP3 file URL
        }).then(function() {
            const url = player.getSource().progressive;
            wavesurfer.load(url);
            wavesurfer.media.volume = 0
            wavesurfer.getWrapper().onclick = function() {
                player.seek(wavesurfer.getCurrentTime())
            }
            console.log('Successfully loaded source'); // Success!
        }, function() {
            console.log('Error while loading source'); // Error!
        });

        player.on("timechanged", function(data) {
            wavesurfer.media.currentTime = data.time
        })

        player.on("seek", function(data) {
            wavesurfer.media.currentTime = data.seekTarget
        })

        const wavesurfer = WaveSurfer.create({
            container: '#waveform',
            waveColor: 'violet',
            progressColor: 'purple',
            cursorColor: 'white',
        });
    </script>

</body>

</html>

Screenshot 2023-11-20 at 6.29.30 PM
Screenshot 2023-11-20 at 6.29.30 PM1428×985 66.6 KB

Note that the tool needs do download the whole file ahead of time, so the waveform can take a long time to show up, especially if the file is heavy. I recommend trying on a short MP3 or MP4 file as a start.

Since the whole file needs to be downloaded ahead of time and the plugin relies on the browser’s Native capabilities, I don’t think it would be viable for HLS and DASH streams

Let me know in case you have any questions.

Please note that this example is for experimental purpose only, as it has not been tested extensively and may contain some unforeseen issues.

3

As mentioned in one of the Github issues from the project you referenced, I don’t see how HLS or DASH could be supported with this type of plugin, since it uses the native capabilities of the Browser (most browsers only support progressive files Natively).

Please feel free to provide your insights on the use-case for the wavesurfer, as it could be really interesting for our community.

4

Thanks Ludovic, looks great ! For HLS or Dash we were thinking to generate a wav image using FFMPEG, And sync the player position with the image : Waveform – FFmpeg

If you had any alternative sugesstion, that would be helpful.

Thanks

1 Like
5

Thanks !
Yes that’s what I was thinking too for DASH or HLS. Let us know if you need any help implementing that.

6

This topic was automatically closed 60 minutes after the last reply. New replies are no longer allowed.