CODEWITHSUNDEEP
htmlaudiobutton
jennyooooo
jennyooooo

Reputation: 95

Simple custom play button for several songs in HTML

All I want to do is post several songs on my page where the user presses a custom image that I created. I don't want to use Flash since I want this to work on the iPad and iPhone. But I want to create a cute play button as opposed to the standard console.

Thanks!!!

Upvotes: 4

Views: 20599

Answers (4)

Abdulbasit
Abdulbasit

Reputation: 790

I am definitely late to the Party, but perhaps this might help someone someday, I was also looking for a way to have the most minimal audio player as a challenge this is what I came up with,

The script used plain javascript with no external libraries

class CustomAudioPlayer {
    constructor(audioElement, playerManager) {
        this.audio = audioElement;
        this.playerManager = playerManager;
        this.createPlayer();
        this.attachEvents();
    }

    createPlayer() {
        // Create the player container
        this.playerContainer = document.createElement('div');
        this.playerContainer.classList.add('audio-player');

        // Create the progress circle
        this.progressCircle = document.createElement('div');
        this.progressCircle.classList.add('progress-circle');

        // Create the play/pause button
        this.playPauseBtn = document.createElement('button');
        this.playPauseBtn.classList.add('play');
        this.progressCircle.appendChild(this.playPauseBtn);

        // Append progress circle to the player container
        this.playerContainer.appendChild(this.progressCircle);

        // Hide the original audio element
        this.audio.style.display = 'none';

        // Insert the player container before the original audio element
        this.audio.parentNode.insertBefore(this.playerContainer, this.audio);
    }

    attachEvents() {
        this.playPauseBtn.addEventListener('click', () => {
            if (this.audio.paused) {
                this.playerManager.pauseAll();
                this.audio.play();
                this.playPauseBtn.classList.remove('play');
                this.playPauseBtn.classList.add('pause');
                this.playerManager.setCurrentPlayer(this);
            } else {
                this.audio.pause();
                this.playPauseBtn.classList.remove('pause');
                this.playPauseBtn.classList.add('play');
                this.playerManager.setCurrentPlayer(null);
            }
        });

        this.audio.addEventListener('timeupdate', () => {
            const progress = (this.audio.currentTime / this.audio.duration) * 100;
            this.progressCircle.style.background = `conic-gradient(#007bff ${progress}%, #ccc ${progress}%)`;
        });

        this.audio.addEventListener('ended', () => {
            this.playPauseBtn.classList.remove('pause');
            this.playPauseBtn.classList.add('play');
            this.playerManager.setCurrentPlayer(null);
        });
    }

    pause() {
        this.audio.pause();
        this.playPauseBtn.classList.remove('pause');
        this.playPauseBtn.classList.add('play');
    }

    static initialize() {
        const playerManager = new PlayerManager();
        document.querySelectorAll('audio').forEach(audioElement => {
            new CustomAudioPlayer(audioElement, playerManager);
        });
    }
}

class PlayerManager {
    constructor() {
        this.currentPlayer = null;
    }

    setCurrentPlayer(player) {
        this.currentPlayer = player;
    }

    pauseAll() {
        if (this.currentPlayer) {
            this.currentPlayer.pause();
            this.currentPlayer = null;
        }
    }
}

document.addEventListener('DOMContentLoaded', () => {
    CustomAudioPlayer.initialize();
});

function applyAudioPlayerStyles() {
    const styles = `
    .audio-player {
        position: relative;
        display: inline-block;
    }

    .progress-circle {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background: conic-gradient(#007bff 0%, #ccc 0%);
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        transition: border-color 0.3s;
    }

    button {
        width: 40px;
        height: 40px;
        border: none;
        border-radius: 50%;
        background-color: #007bff;
        color: #fff;
        font-size: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        outline: none;
    }

    button.play::before {
        content: '►';
    }

    button.pause::before {
        content: '❚❚';
    }

    audio {
        display: none;
    }
    `;

    const styleSheet = document.createElement("style");
    styleSheet.type = "text/css";
    styleSheet.innerText = styles;
    document.head.appendChild(styleSheet);
}

applyAudioPlayerStyles();
<audio src="https://file-examples.com/storage/fe3f15b9da66a36baa1b51a/2017/11/file_example_MP3_700KB.mp3"></audio>
<audio src="https://kolber.github.io/audiojs/demos/mp3/juicy.mp3"></audio>

Upvotes: 0

Lloyd
Lloyd

Reputation: 8406

here's an example of how to trigger audio playback via custom icon images.. this method uses jPlayer so is cross-platform.. test it on this fiddle: http://jsfiddle.net/75lb/XPkTz/

example markup: 

<div id="audio"></div>
<a href="http://www.freesfx.co.uk/rx2/mp3s/3/2665_1315685839.mp3">
    <img src="http://icons.iconarchive.com/icons/creative-freedom/shimmer/48/Play-icon.png" />
</a>
<a href="http://www.jplayer.org/audio/mp3/Miaow-07-Bubble.mp3">
    <img src="http://icons.iconarchive.com/icons/creative-freedom/shimmer/48/Play-icon.png" />
</a>

​and script: 

$("#audio").jPlayer({
    swfPath: "http://www.jplayer.org/latest/js/Jplayer.swf",
    supplied: "mp3"
});

$("a").click(function(e) {
    $("#audio").jPlayer("setMedia", { 
        mp3: this.href 
    }).jPlayer("play");

    e.preventDefault();
});
​

don't forget to ensure you have jQuery and jPlayer loaded on your page: 

<script type='text/javascript' src='http://code.jquery.com/jquery-1.6.4.js'></script>
<script type='text/javascript' src="http://www.jplayer.org/latest/js/jquery.jplayer.min.js"></script>

Upvotes: 0

Marat Tanalin
Marat Tanalin

Reputation: 14123

You can use AUDIO element for modern browsers. For IE8 and older you can try to utilize BGSOUND element and/or Flash fallback.

Upvotes: 0

jacktheripper
jacktheripper

Reputation: 14219

Check out this example. It uses the HTML5 audio tags

HTML

<a onclick="this.firstChild.play()" class="button">
   <audio src="http://upload.wikimedia.org/wikipedia/commons/a/a9/Tromboon-sample.ogg">
   </audio>
&#9658;</a>​

This works for as many audio files as you want to play. See this example that takes multiple sources.

See this example that has been updated for aesthetics.

Upvotes: 1

Related Questions