Estoy tratando de construir un reproductor de música. ahora obtengo el enlace de cada canción, genero su wave y luego imprimo la wave de vuelta a esa canción. wave está imprimiendo en <div class="wavetest"></div> . aquí está el código HTML
<div class="playlist p-5"> <div class="song p-3"> <div class="container"> <div class="row"> <div class="col-sm-2"> <span><button href="song.mp3" class="songlink btn"> song 1<i class="fa fa-play playbtn"></i></button></span> </div> <div class="col-sm-8"> <div class="wavetest">here wave should be of song 1</div> </div> </div> <div class="row"> <div class="col-sm-2"> <span><button href="song2.m4a" class="songlink btn"> song 2<i class="fa fa-play playbtn"></i></button></span> </div> <div class="col-sm-8"> <div class="wavetest">here wave should be of song 2</div> </div> </div> <div class="row"> <div class="col-sm-2"> <span><button href="song3.mp3" class="songlink btn"> song 3<i class="fa fa-play playbtn"></i></button></span> </div> <div class="col-sm-8"> <div class="wavetest">here wave should be of song 3</div> </div> </div> </div> </div> </div>aquí está el código jquery
$(document).ready(function(){ var links_arr = []; $('.playlist button').each(function () { links_arr.push( $(this).attr("href") ); }); for (i = 0; i < links_arr.length; ++i) { var link = links_arr[i]; var wavesurfer = WaveSurfer.create({ container: '.wavetest', //container where wave will be printed waveColor: 'violet', progressColor: 'purple' }); wavesurfer.load(link); //generating wave for given song } }); ahora estoy recibiendo la ola de las tres canciones en primer lugar <div class="wavetest"></div> . Quiero obtener la ola en su div apropiado. ¿Cómo puedo abordarlo y sugerir si hay algo mejor para hacer esto?
El contenedor puede ser un elemento DOM , por lo que puede pasar cada wavetest a cada WaveSurfer.create . Hazme saber si esto funciona.
$(document).ready(function(){ var links_arr = []; $('.playlist .row').each(function () { const link = $(this).find('button').attr("href"); const waveContainer = $(this).find('.wavetest'); var wavesurfer = WaveSurfer.create({ // https://wavesurfer-js.org/docs/ says container can be a DOM element // waveContainer is a jQuery object, waveContainer[0] to get actually DOM element container: waveContainer[0], waveColor: 'violet', progressColor: 'purple' }); wavesurfer.load(link); //generating wave for given song }); });