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

Question

我想在 html 的 2 个不同地方播放同一首歌曲。我正在使用 wavesurfer.js 播放歌曲。我希望同一首歌应该在页面的某个地方以及页面的页脚中播放。可能是这样的：

    <!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>

如何在两个不同的地方播放同一首歌。使用 jQuery 或 JavaScript?

Answer 1

您需要为另一个音频创建另一个实例。

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 上播放同一首歌曲

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

html

javascript

jquery

wavesurfer.js