Quiero reproducir la misma canción en 2 lugares diferentes en el html. Estoy usando wavesurfer.js para reproducir la canción. Quiero que esa misma canción se reproduzca en algún lugar de la página, así como en el pie de página. Puede ser algo como esto:
<!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>¿Cómo puedo reproducir la misma canción en dos lugares diferentes? usando jQuery o JavaScript?
Necesitas crear otra Instancia para otro 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>