nhgooi.nl/resources/views/widgets/audioplayer.blade.php

<?php $id = uniqid('player_'); ?>
<div class="audioplayer" id="{{ $id }}">
    @if(!$isStream)
    <div class="waveform">
        <div class="time">0:00</div>
        <div class="duration">0:00</div>
        <div class="hover"></div>
    </div>
    @endif
    
    <div class="volume-controls">
        <button class="btn-toggle-mute" type="button" onclick="toggleMute()">
            <span class="fa fa-volume-high"></span>
        </button>
        <input class="volume-slider" type="range" min="0" max="1" step="0.01" value="1"
            onchange="setVolume( this.value )" />
    </div>

    <div class="audio-controls">
        @if(!$isStream)
        <button class="btn btn-jump" type="button" onclick="wavesurfer_{{ $id }}.skip(-60)">
            <span class="fa fa-backward-fast"></span>
            <label>-60 s</label>
        </button>
        <button class="btn btn-jump" type="button" onclick="wavesurfer_{{ $id }}.skip(-10)">
            <span class="fa fa-backward-step"></span>
            <label>-10 s</label>
        </button>
        @endif
        <button class="btn btn-play" type="button" onclick="playPause()">
            <span class="play-button-icon fa fa-play"></span>
            <label class="play-button-label">Afspelen</label>
        </button>
        @if(!$isStream)
        <button class="btn btn-jump" type="button" onclick="wavesurfer_{{ $id }}.skip(10)">
            <span class="fa fa-forward-step"></span>
            <label>+10 s</label>
        </button>
        <button class="btn btn-jump" type="button" onclick="wavesurfer_{{ $id }}.skip(60)">
            <span class="fa fa-forward-fast"></span>
            <label>+60 s</label>
        </button>
        @endif
    </div>
</div>

@if($isStream)

<audio id="audio_{{ $id }}">
    <source src="{{ $source }}" type="audio/mp3" />
</audio>

<script>
    var player_{{ $id }};
    
    setVolume = volume => player_{{ $id }}.volume = volume;
    function toggleMute () {
        var isMuted = !player_{{ $id }}.muted;
        player_{{ $id }}.muted = isMuted;
        if(isMuted) {
            $('#{{ $id }} .btn-toggle-mute').html('<span class="fa fa-volume-xmark"></span>');
            $('#{{ $id }} .volume-slider').attr('disabled', 'disabled');
        } else {
            $('#{{ $id }} .btn-toggle-mute').html('<span class="fa fa-volume-high"></span>');
            $('#{{ $id }} .volume-slider').removeAttr('disabled');
        }        
    }

    pause = () => player_{{ $id }}.pause();

    function playPause() {
        var player = player_{{ $id }};
        if (player.paused) {
            player.play();
        } else {
            player.pause();
        }
    }

    addEventListener("DOMContentLoaded", function() {
        var player = document.getElementById( "audio_{{ $id }}");
        player_{{ $id }} = player;

        $(player_{{ $id }}).on('play', () => {
            $('#{{ $id }} .play-button-icon').addClass('fa-pause').removeClass('fa-play');
            $('#{{ $id }} .play-button-label').text('Pauzeren');
        })
        $(player_{{ $id }}).on('pause', () => {
            $('#{{ $id }} .play-button-icon').addClass('fa-play').removeClass('fa-pause');
            $('#{{ $id }} .play-button-label').text('Verder spelen');
        });
    });  
</script>

@else

<script>
    var wavesurfer_{{ $id }};
    
    setVolume = volume => wavesurfer_{{ $id }}.setVolume( volume );
    playPause = () => wavesurfer_{{ $id }}.playPause();
    pause = () => wavesurfer_{{ $id }}.pause();

    function  toggleMute () {
        var isMuted = !wavesurfer_{{ $id }}.getMuted();
        wavesurfer_{{ $id }}.setMuted(isMuted);
        if(isMuted) {
            $('#{{ $id }} .btn-toggle-mute').html('<span class="fa fa-volume-xmark"></span>');
            $('#{{ $id }} .volume-slider').attr('disabled', 'disabled');
        } else {
            $('#{{ $id }} .btn-toggle-mute').html('<span class="fa fa-volume-high"></span>');
            $('#{{ $id }} .volume-slider').removeAttr('disabled');
        }
        
    }

    addEventListener("DOMContentLoaded", function() {
        const canvas = document.createElement('canvas')
        const ctx = canvas.getContext('2d')

        // Create the waveform
        wavesurfer_{{ $id }} = WaveSurfer.create({
            container: '#{{ $id }} .waveform',
            waveColor: '#3A96EE',
            progressColor: '#0118A1',
            height: 50,
            barWidth: 1,
            @if(isset($lengte))
            duration: {{ $lengte }},
            @endif
            @if($waveform)
            peaks:  {{ json_encode($waveform->data) }},
            normalize: true,
            @endif
            
            url: '{{ $source }}',
        });

        // Play/pause on click
        wavesurfer_{{ $id }}.on('click', () => {
            wavesurfer_{{ $id }}.play();
        })
        wavesurfer_{{ $id }}.on('play', () => {
            $('#{{ $id }} .play-button-icon').addClass('fa-pause').removeClass('fa-play');
            $('#{{ $id }} .play-button-label').text('Pauzeren');
        })
        wavesurfer_{{ $id }}.on('pause', () => {
            $('#{{ $id }} .play-button-icon').addClass('fa-play').removeClass('fa-pause');
            $('#{{ $id }} .play-button-label').text('Verder spelen');
        })

        // Hover effect
        {
            const hover = document.querySelector('#{{ $id }} .hover')
            const waveform = document.querySelector('#{{ $id }} .waveform')
            waveform.addEventListener('pointermove', (e) => (hover.style.width = `${e.offsetX}px`))
        }

        // Current time & duration
        {
            const formatTime = (seconds) => {
                const minutes = Math.floor(seconds / 60)
                const secondsRemainder = Math.round(seconds) % 60
                const paddedSeconds = `0${secondsRemainder}`.slice(-2)
                return `${minutes}:${paddedSeconds}`
            }

            const timeEl = document.querySelector('#{{ $id }} .time')
            const durationEl = document.querySelector('#{{ $id }} .duration')
            wavesurfer_{{ $id }}.on('decode', (duration) => (durationEl.textContent = formatTime(duration)))
            wavesurfer_{{ $id }}.on('timeupdate', (currentTime) => (timeEl.textContent = formatTime(currentTime)))
        }
    });
</script>

@endif