Unraid Json Api, Webapp, Apache php docker und mp3 komisches verhalten.

January 13, 20242 yr

Hallo,

ich bin gerade an meiner WebApp am basteln, folgendes habe ich bis jetzt realisiert. Cpu Auslastung, Ram Auslastung. Festplatten werden mir angezeigt. Als Beispiel für die api habe ich mir folgendes angesehen:

https://github.com/Cyanlabs/jsonapi-unraid

nur habe ich es bei mir die Api nicht im kern system sondern im Apache php docker container realisiert.

jetzt bin ich gerade am mp3 player dran zu schreiben für meine mp3 sammlung anzuhören. Wie im docker konfiguration zu sehen habe ich im apache php music/ folder an meinen music Share weitergeleitet. Es wird auch schön in php ausgegeben in der liste meine mp3 sammlung hier im screen angehängt. Das komische dabei zugriff auf mp3 gibt mir 404 error datei nicht gefunden aus da bin ich ratlos http://192.168.48.5/music/f1b018951b1d42.mp3. Ich bin der meinung wenn die liste ausgegeben wird dann muss ich doch auch zugriff auf datei haben.

Hier gerne noch mein testcode:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Music Player</title>
</head>
<body>

<h2>Music Player</h2>

<?php
// Funktion zum Auflisten von MP3-Dateien in einem Verzeichnis
function listMp3Files($dir) {
    $mp3Files = glob($dir . '/*.mp3');
    return $mp3Files;
}

// Verzeichnis, in dem sich die Playlists befinden
$playlistDirectory = '/music';

// Playlist aus dem Verzeichnis auswählen (jeder Unterordner wird als Playlist betrachtet)
$playlists = glob($playlistDirectory . '/*', GLOB_ONLYDIR);

// Durchlaufe jede Playlist und zeige sie an
foreach ($playlists as $playlist) {
    echo '<h3>' . basename($playlist) . '</h3>';
    $mp3Files = listMp3Files($playlist);

    // Überprüfe, ob MP3-Dateien vorhanden sind
    if (!empty($mp3Files)) {
        echo '<ul>';
        foreach ($mp3Files as $song) {
            $encodedSong = urlencode($song);
            echo '<li><a href="javascript:void(0);" onclick="playMusic(\'' . $encodedSong . '\')">' . basename($song) . '</a></li>';
        }
        echo '</ul>';
    } else {
        echo '<p>Keine MP3-Dateien in dieser Playlist vorhanden.</p>';
    }
}
?>
<a href="/music/dwhelper/s.nagovizin.mp3" download>s.nagovizin.mp3</a>


<script>
function playMusic(src) {
    var audioPlayer = new Audio();
    audioPlayer.src = decodeURIComponent(src);
    audioPlayer.controls = true;
    audioPlayer.autoplay = true;

    var playerContainer = document.getElementById('player-container');
    playerContainer.innerHTML = ''; // Leeren Sie den Container, bevor Sie den neuen Player einfügen
    playerContainer.appendChild(audioPlayer);
}
</script>

<div id="player-container"></div>

</body>
</html>