如何使用 jQuery 或 JavaScript 中的 wavesurfer.js 在 HTML 中的两个不同 div 上播放同一首歌曲

Question

I want to play same song on 2 different places in the html.我想在 html 的 2 个不同地方播放同一首歌曲。 I'm using wavesurfer.js to play the song.我正在使用 wavesurfer.js 播放歌曲。 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/bootstrap@5.0.2/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 class="container mt-5">
    <div class="row border mt-5">
        <div id="pageDiv"></div>
    </div>
</div>




    <footer class="footer bg-secondary border w-100" style="position: fixed; bottom: 0;">
        <div class="container">
            <div class="row">
                <p class="text-white text-center">Footer</p>
                <div id="footerDiv"></div>
            </div>
        </div>
    </footer>




    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://unpkg.com/wavesurfer.js@5.2.0/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?使用 jQuery 或 JavaScript？

Answer 1

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/bootstrap@5.0.2/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/bootstrap@5.0.2/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 class="container mt-5"> <div class="row border mt-5"> <div id="pageDiv"></div> </div> </div> <footer class="footer bg-secondary border w-100" style="position: fixed; bottom: 0;"> <div class="container"> <div class="row"> <p class="text-white text-center">Footer</p> <div id="footerDiv"></div> </div> </div> </footer>

如何使用 jQuery 或 JavaScript 中的 wavesurfer.js 在 HTML 中的两个不同 div 上播放同一首歌曲

问题描述

1 个解决方案

解决方案1
0 2022-02-01 12:41:53

如何使用 jQuery 或 JavaScript 中的 wavesurfer.js 在 HTML 中的两个不同 div 上播放同一首歌曲

问题描述

1 个解决方案

解决方案1 0 2022-02-01 12:41:53

解决方案1
0 2022-02-01 12:41:53