how to play same song on two different divs in the HTML using wavesurfer.js in jQuery or JavaScript-CodePudding

I want to play same song on 2 different places in the html. I'm using wavesurfer.js to play the song. I want that same song should paly somewhere in the page as well as in the footer of the page. May be something like this:

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Player</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"/>
</head>
<body>

<div >
    <div >
        <div id="pageDiv"></div>
    </div>
</div>




    <footer  style="position: fixed; bottom: 0;">
        <div >
            <div >
                <p >Footer</p>
                <div id="footerDiv"></div>
            </div>
        </div>
    </footer>




    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://unpkg.com/[email protected]/dist/wavesurfer.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script type="text/javascript">
            var wavesurfer = WaveSurfer.create({
                container: '#pageDiv , #footerDiv',
                height:48,
                responsive:true,
                hideScrollbar:true,
                waveColor: '#00000078',
                progressColor: '#bbbbbb',
                barRadius:4,
                scrollParent: false
            });
                wavesurfer.load('songs/song1.mp3');
                wavesurfer.on('ready', function(){
                    console.log('ready');
                    wavesurfer.play();
                });
    </script>
</body>
</html>

How can I play the same song on two different places. using jQuery or JavaScript?

CodePudding user response：

You need to create another Instance for another audio.

const wavesurfer1 = WaveSurfer.create({
    container: "#pageDiv"
});

wavesurfer1.load("sample.mp3");

const wavesurfer2 = WaveSurfer.create({
    container: "#footerDiv",
});

wavesurfer2.load("sample.mp3");

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"/>
<script src="https://unpkg.com/wavesurfer.js"></script>

<div >
    <div >
        <div id="pageDiv"></div>
    </div>
</div>

<footer  style="position: fixed; bottom: 0;">
    <div >
        <div >
            <p >Footer</p>
            <div id="footerDiv"></div>
        </div>
    </div>
</footer>