<script>{{ script }}</script>
<style>
    {{ style }}
    #waveform_{{ idx }} {
        cursor: pointer;
        position: relative;
    }
    #time_{{ idx }}, #duration_{{ idx }} {
        position: absolute;
        z-index: 11;
        top: 95%;
        margin-top: -1px;
        transform: translateY(-50%);
        font-size: 11px;
        background: rgba(0, 0, 0, 0.75);
        color: #DDDD;
    }
    #time_{{ idx }} { left: 0; }
    #duration_{{ idx }} { right: 0; }
</style>
<div id="waveform_{{ idx }}" style="background-color: black; width: {{ width }}px;">
    <div id="time_{{ idx }}">0:00</div>
    <div id="duration_{{ idx }}">0:00</div>
</div>
{% if is_streaming %}
<button class="btn btn-primary my-3" id="button_{{ idx }}">
    暂停 <i class="fas fa-pause"></i>
</button>
</br>
<script>
    button_{{ idx }} = document.getElementById('button_{{ idx }}')
    player_{{ idx }} = new PCMPlayer({ sampleRate: '{{ rate }}'});
    isPlaying_{{ idx }} = true
    button_{{ idx }}.addEventListener('click', function() {
        if (isPlaying_{{ idx }}) {
            player_{{ idx }}.pause()
            button_{{ idx }}.innerHTML = '播放 <i class="fas fa-play"></i>'
        } else {
            player_{{ idx }}.continue()
            button_{{ idx }}.innerHTML = '暂停 <i class="fas fa-pause"></i>'
        }
        isPlaying_{{ idx }} = !isPlaying_{{ idx }}
    })
</script>
{% endif %}
<script>
    wavesurfer_{{ idx }} = WaveSurfer.create({
        container: '#waveform_{{ idx }}',
        autoScroll: true,
        waveColor: '#4BF2A7',
        cursorColor: '#FF0000',
        cursorWidth: 2,
        progressColor: '#4BF2A7',
        normalize: true,
{% if not is_streaming %}
        url: '{{ audio }}',
        sampleRate: '{{ rate }}',
{% endif %}
        minPxPerSec: 100,
        backend: 'WebAudio',
    });
    wavesurfer_{{ idx }}.on('interaction', () => { wavesurfer_{{ idx }}.playPause() });
    wavesurfer_{{ idx }}.on('decode', (duration) => (document.querySelector('#duration_{{ idx }}').textContent = formatTime(duration)));
    wavesurfer_{{ idx }}.on('timeupdate', (currentTime) => (document.querySelector('#time_{{ idx }}').textContent = formatTime(currentTime)));
{% if enable_hover %}
    wavesurfer_{{ idx }}.registerPlugin(create_hover());
{% endif %}
{% if enable_timeline %}
    wavesurfer_{{ idx }}.registerPlugin(create_timeline());
{% endif %}
{% if enable_minimap %}
    wavesurfer_{{ idx }}.registerPlugin(create_minimap());
{% endif %}
{% if enable_spectrogram %}
    wavesurfer_{{ idx }}.registerPlugin(create_spectrogram());
{% endif %}
{% if enable_zoom %}
    wavesurfer_{{ idx }}.registerPlugin(create_zoom());
{% endif %}
{% if enable_regions %}
    wavesurfer_{{ idx }}.registerPlugin(create_regions());
    activeRegion_{{ idx }} = null;
    regions_{{ idx }}.on('region-clicked', (region, e) => {
        e.stopPropagation();
        activeRegion_{{ idx }} = region;
        region.play();
    });
    regions_{{ idx }}.on('region-out', (region) => {
        wavesurfer_{{ idx }}.pause();
    });
    document.addEventListener('keydown', function(event) {
        if (event.key == 'Backspace' || event.key == 'Delete') {
            console.log(event.key)
            if (activeRegion_{{ idx }}) {
                activeRegion_{{ idx }}.remove();
            }
        }
    });
{% endif %}
</script>
