[GELOEST] AudioPlayer vollständiges Laden verhindern

[AEGHR347895]

Guten Abend,

mein HTML Audio Player verwendet eine PHP Datei als source, diese den MIME Type "audio/wav" verwendet.

Wie kann ich das erreichen? Mein Idee war eine defekte Audio Datei zu verwenden, aber dann bricht das Loading bereits nach etwa 10 Sekunden ab.

Der Grund dafür ist, dass ich ein Loading neben dem Play-Button möchte. Ich möchte, dass das Loading niemals endet.

Nach etwa 120 Sekunden hört der Audio Player auf, die Dummy Quelle zu laden und zeigt 00:00:00 an.

<?php
$file = '';
if (file_exists($file)) {
    header('Content-Type: audio/wav');
    header('Content-Length: ' . filesize($file));
    header('Content-Disposition: inline; filename="silence1.wav"');
    usleep(30000000);
    readfile($file);
    exit;
} else {
    echo "Die Datei wurde nicht gefunden.";
}
?>

Gruß

EDIT: Ich konnte es ohne PHP Code innerhalb eines Javascripts lösen, hat sich schon erledigt =) Funktioniert übrigens doch mit einer "kaputten" 0Byte WAV-Datei

                <div class="audio-player">
                    <audio id="audioPlayer" controls>
                        <source id="audioSource" type="audio/wav" src="../call-recordings/audioplayer/loading.wav">
                        Your browser does not support the audio element.
                    </audio>
                </div>

                <script>
                    let playerUpdated = false;
                    let intervalId; // Variable zum Speichern der setInterval ID

                    // PHP setzt den Dateinamen für die SSE-URL
                    let recordingFilename = "<?php echo isset($_GET['recording_filename']) ? addslashes($_GET['recording_filename']) : ''; ?>";

                    if (recordingFilename.trim() === "") {
                        console.error("Kein Dateiname übergeben!");
                    } else {
                        console.log("Dateiname für SSE:", recordingFilename);
                    }

                    // SSE-Verbindung starten
                    const eventSource = new EventSource(`../call-recordings/audioplayer/streamaudio.php?filename=${encodeURIComponent(recordingFilename)}`);

                    eventSource.onmessage = function(event) {
                        const data = JSON.parse(event.data);

                        // Wenn die Datei existiert und playerUpdated noch nicht gesetzt wurde
                        if (data.status === 'exists' && !playerUpdated) {
                            const audioPlayer = document.getElementById('audioPlayer');
                            const audioSource = document.getElementById('audioSource');

                            if (recordingFilename.trim() !== "") {
                                audioSource.src = "../call-recordings/" + recordingFilename;
                                console.log("Setze Audioquelle auf:", audioSource.src);
                                audioPlayer.load();
                                playerUpdated = true;

                                // Stoppe das unendliche Laden
                                clearInterval(intervalId); // Stopp das Interval zum Laden
                                console.log("Endloses Laden gestoppt.");
                            } else {
                                console.error("Kein gültiger Dateiname übergeben.");
                            }
                        }
                    };

                    eventSource.onerror = function(event) {
                        console.error("Fehler bei der SSE-Verbindung:", event);
                    };

                    // **Verhindert das Abspielen und sorgt für endloses Laden**
                    const audioPlayer = document.getElementById('audioPlayer');

                    // Wenn "canplay" ausgeführt wird, blockiere das Abspielen
                    audioPlayer.addEventListener('canplay', function(event) {
                        event.preventDefault(); // Verhindert das Abspielen
                       // console.log("Audio kann theoretisch abgespielt werden, aber wir verhindern es.");
                    });

                    // Simuliere unendliches Laden durch wiederholtes Setzen der Quelle
                    intervalId = setInterval(() => {
                      //  console.log("Simuliere unendliches Laden...");
                        // Setze die Quelle immer wieder, um das Laden fortzusetzen
                        audioPlayer.load();
                    }, 1000);

                    // Wenn der Audio-Player "play" auslöst, stoppen wir ihn sofort.
                    audioPlayer.addEventListener('play', function() {
                      //  console.log("Abspielen wird verhindert.");
                        audioPlayer.pause(); // Stoppt das Abspielen
                    });
                </script>

Grund: Wenn die TK die Audio Datei vollständig geladen wird, gibt ein SSE-PHP-Script dem AudioPlayer-Javascript Bescheid und zeigt dann die entsprechende Audio Datei. Ausgelegt für den Safari Webbrowser.