Advice

How would I go about, in an HTML webpage, having a random file in a specific directory be selected in a src? My intent is to have a randomized audio file autoplay whenever I open any webpage on my website (I know, autoplay audio is morally questionable, but its the behavior I want). I already have a working instance of the webpage playing a predesignated file. As I outlined, I want a different file each time which exists in the "audio/" directory to be played. I suspect javascript or java arrays are needed to make this possible, but I'm not versed enough as of now to implement or apply the as of now completely separate progresses in static html site building and struggling through java video courses character by character in Eclipse. I'm what my username suggests.

Here's the contents of the HTML file as it is, with the unrelated bits excised;

<html>
<title>Demos</title>

<a href="home.html" accesskey="`"></a>
<audio autoplay="true" src="audio/pcm001rip.mp3"> </audio>

<body bgcolor=#000000 text=#ffffff>
</body>

</html>
Improve this question

3 Replies 3

Jean patrick R
•

A browser cannot read the file list from a directory automatically for security reasons.

So you must manually list the filenames in a JavaScript array or generate that list with server-side code (PHP).

Below are both methods depending on what you can use.

✅ Method 1 — Pure HTML + JavaScript (simplest)

Just list your audio filenames in an array.

✔ Works on any static website (GitHub Pages, Netlify, normal hosting)
Example:
<html>
<head>
<title>Demos</title>

<script>
    // List all audio files manually
    const audioFiles = [
        "audio/pcm001rip.mp3",
        "audio/pcm002rip.mp3",
        "audio/pcm003rip.mp3",
        "audio/pcm004rip.mp3"
    ];

    // Pick a random file
    const randomFile = audioFiles[Math.floor(Math.random() * audioFiles.length)];

    // When page loads, set the audio element's src
    window.onload = function () {
        document.getElementById("player").src = randomFile;
    };
</script>

</head>

<audio id="player" autoplay></audio>

<body bgcolor="#000000" text="#ffffff">
</body>
</html>


✔ Every time you reload the page → a random audio file plays
✔ No server needed
✔ Easy to maintain — just add file names to the array

✅ Method 2 — Automatically read the directory (requires PHP)

If your hosting supports PHP, you can automatically scan the directory so you never need to edit the array.

Example (PHP + JS hybrid):
<html>
<head>
<title>Demos</title>

<?php
    $files = glob("audio/*.mp3");
    $json = json_encode($files);
    echo "<script>var audioFiles = $json;</script>";
?>
<script>
    const randomFile = audioFiles[Math.floor(Math.random() * audioFiles.length)];

    window.onload = function () {
        document.getElementById("player").src = randomFile;
    };
</script>

</head>

<audio id="player" autoplay></audio>

<body bgcolor="#000000" text="#ffffff">
</body>
</html>


✔ Automatically pulls all .mp3 files
✔ No need to modify HTML when adding new files
Improve this answer
Anonymous
•

(solved by Jean patrick R - thank you!)

(I removed this from the title since it does not belong there.)

Improve this answer
Brentspine
•

Policy: Generative AI (e.g., ChatGPT) is banned

Improve this answer

Your Reply

By clicking “Post Your Reply”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.