1

Using this wavesurfer inside a @foreach loop in laravel view. But it shows only one time. I tried it adding this code in another file and include it here but that is producing it many times only at one place.

 @foreach($campaigns as $campaign)

<div class="col-8 col-md-3">
 <div id="waveform" style="width: 300px;margin-bottom: -20px;margin-top: -40px;"></div>
</div>

@endforeach

<script src="https://unpkg.com/wavesurfer.js"></script>
<script src="/js/wavesurfer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

<script type="text/javascript">

  var audio = document.getElementById("audio").value;

  var wavesurfer = WaveSurfer.create({
    container: document.querySelector('#waveform'),
    waveColor: 'grey',
    progressColor: 'grey',
    barHeight: 0.5,
    responsive: true,
  });
  wavesurfer.on('click', function() {
    wavesurfer.play();
  });
  wavesurfer.load('/musicfile/Kalimba.mp3');

</script>
Abby
  • 71
  • 1
  • 7
  • html id attribute should be unique. You don't want to make 10 elements with the same id. So, instead use class. Like this `
    ` and change your `querySelector` accordingly `querySelector('.waveform')`
     – krylov123 Nov 04 '20 at 17:18
  • Does this answer your question? [Dynamically create multiple wavesurfer objects with unique names](https://stackoverflow.com/questions/50569574/dynamically-create-multiple-wavesurfer-objects-with-unique-names) – krylov123 Nov 04 '20 at 17:20

0 Answers0