top of page

Just Jolly Functions

Functions: Adding an Audio Player with HTML, CSS, and JavaScript

You can upload an audio file via code (perhaps programmatically, by setting the file in the code itself) instead of using the file input button. For example, you can use an audio file that is already hosted somewhere or directly from the local file system if you provide the path.



Code where the audio file is loaded directly into the player using JavaScript (without needing a file input):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Audio Player</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }

        .audio-player {
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            text-align: center;
            width: 300px;
        }

        h2 {
            margin-bottom: 20px;
        }

        audio {
            width: 100%;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class="audio-player">
        <h2>Audio Player</h2>
        <audio id="audio" controls>
            Your browser does not support the audio element.
        </audio>
    </div>

    <script>
        // Define the path to the audio file
        const audioPath = 'path/to/your/audiofile.mp3'; // Change this to your file path

        // Grab the audio element
        const audioElement = document.getElementById('audio');

        // Set the audio source dynamically using JavaScript
        audioElement.src = audioPath;

        // Start playing the audio automatically
        audioElement.play().catch(error => {
            console.error('Error playing audio:', error);
        });
    </script>
</body>
</html>

Explanation:

  • No file input button: The audio file path is provided directly in the JavaScript (audioPath), so there's no need for an upload button or file input.

  • Dynamic audio loading: The audio source (src) is dynamically set using JavaScript based on the audioPath variable.

  • Auto-play: The audio is set to play automatically once the post page is loaded.

  • Error handling: If there's an issue with playing the audio, it catches the error and logs it.


Code for Audio Player that Plays Audio When Clicked:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Audio Player</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }

        .audio-player {
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            text-align: center;
            width: 300px;
        }

        h2 {
            margin-bottom: 20px;
        }

        audio {
            width: 100%;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class="audio-player">
        <h2>Audio Player</h2>
        <audio id="audio" controls>
            Your browser does not support the audio element.
        </audio>
    </div>

    <script>
        // Define the path to the audio file
        const audioPath = 'path/to/your/audiofile.mp3'; // Change this to your file path

        // Grab the audio element
        const audioElement = document.getElementById('audio');

        // Set the audio source dynamically using JavaScript
        audioElement.src = audioPath;

        // Pause the audio initially when the page loads
        audioElement.pause();

        // Play the audio only when the user interacts with the controls (using the browser's play/pause icon)
    </script>
</body>
</html>

Behavior:

  • On page load: The audio is paused, and the play/pause button from the browser’s controls will work for playback.

  • On user interaction: The user can click the play icon to start the audio, and the pause icon will pause the audio.


Key Things to Note:

  1. Replace 'path/to/your/audiofile.mp3' with the actual path to your audio file. This could be a relative path to a file in your project or a URL to an audio file hosted online.

  2. If you're using a local file (from your computer), you can reference it like so:

    • 'file:///C:/path/to/your/audiofile.mp3' (for Windows)

    • 'file:///Users/username/path/to/audiofile.mp3' (for Mac)

  3. If you want to load a file from a server, just replace the path with the URL of the file:


Example:

Let's say you want to use a sample audio file hosted online (e.g., from a public URL like a sample audio hosted on a server). The path would look like this:

const audioPath = 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3';

This will automatically load and play that file when the post page is opened.

bottom of page