Как использовать wavesurfer.js с django

Я хотел бы узнать, как создать несколько аудиодорожек с помощью wavesurfer на django. Я создал один аудиотрек с помощью wavesurfer и хотел бы узнать, как интегрировать его с django для создания нескольких треков динамчески.

Заранее благодарю за любые советы или оказанную помощь.

Вот аудио плеер в HTML файле:

<div class="container">
                <div class="row">
                  <div class="col-lg-6">
                    <div class="container-audio">
                      <img src="static/assets/img/perfil.png" alt="" />
                        <div class="track-name">
                          <h2>O nome da música</h2>
                            <p>O nome do álbum</p>
                              <div id="audio1" class="audio-track"></div>
                    <div class="controls">
                      <img
                        class="icones"
                        id="playBtn"
                        src="static/assets/img/play.png"
                        alt=""
                      />
                      <img
                        class="icones"
                        id="stopBtn"
                        src="static/assets/img/stop.png"
                        alt=""
                      />
                      <img
                        class="icones"
                        id="volumeBtn"
                        src="static/assets/img/volume-up.png"
                        alt=""
                      />
                    </div>
              </div>
            </div> <!--col--> 
     </div> <!--row-->
</div> <!--container-->

Вот код wavesurfer на javascript:

var audioTrack = WaveSurfer.create({
    container: '.audio-track',
    waveColor: '#dde5ec',
    progressColor: '#03cebf',
    height: 90,
    responsive: true,
    hideScrollbar: true,
    fillParent: false,
    minPxPerSec: 1.5,
});

audioTrack.load('../static/assets/audio/acontecer.mp3');


const playBtn = document.getElementById('playBtn');
const stopBtn = document.getElementById('stopBtn');
const volumeBtn = document.getElementById('volumeBtn');

playBtn.onclick = function (){
    audioTrack.playPause();
    if(playBtn.src.includes('play.png')){
        playBtn.src = 'static/assets/img/pause.png';

    } else {
        playBtn.src = 'static/assets/img/play.png';

    }

}

stopBtn.onclick = function (){
    audioTrack.stop();
    playBtn.src = 'static/assets/img/play.png';
    
}


volumeBtn.onclick = function (){
    audioTrack.toggleMute();
    if(volumeBtn.src.includes('volume-up.png')){
        volumeBtn.src = 'static/assets/img/mute.png';

    } else {
        volumeBtn.src = 'static/assets/img/volume-up.png';

    }
        
}

audioTrack.on('finish', function () {
    playBtn.src = 'static/assets/img/play.png';
    audioTrack.stop();
    
});

Вернуться на верх