[英]how to play same song on two different divs in the HTML using wavesurfer.js in jQuery or JavaScript
我想在 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?
您需要为另一个音频创建另一个实例。
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.