我想在html中的两个不同位置播放同一首歌。我正在用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？
您需要为另一个音频创建另一个实例。
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>