Custom audio player tutorial 4 – play and pause

Video is ready, Click Here to View ×


In this tutorial we finally get down to the good stuff and start using JavaScript to play and pause our audio track.

The audio track used in this video:
Night Owl by Broke for free
download here:

Don’t forget to subscribe:

Donate on PayPal:

Tags:
————————————————————————————————
Tutorial(Media Genre), Tutorial(Industry),Mp3,Mp4,Audio,Player,Create,Custom,Controls,JavaScript,HTML5,HTML,CSS3,CSS,JS,Java,Script,hyper text mark up language,pause,play,methods,properties,paused,ended,websites,media,scripting,web design,web development,How to
———————————————————————————————– Social links:
————————————————————-
Add me on…

21 Comments on “Custom audio player tutorial 4 – play and pause”

  1. I followed what you said to the T, but I get these two errors when I try to run the play() method and it will not play upon loading the page:

    "Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first. https://goo.gl/xX8pDD"

    "WebSocket connection to 'ws://localhost:8125/' failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED"

    I'm pretty new to this so I have no clue what that means! Please help!

  2. I used classes, not ids, so that I could work out having multiple players on a single page (which would be fairly common). Unfortunately, it didn't work with getElementByClassName.

  3. Hi Quentin Watt.
    How can I make this script work with radio streams ? I stuck to javascript , but fail to make buttons running ok . Works well with mp3 after hdd , but not the mp3 stream .
    You can show you how to do this?
    Thank you very very much!

  4. hi quentin!! good series, but my pause button not appears when toggle…where must i add it?, you not add in html, css… Sorry my ignorance, but i follow two or three times this video and my code ,i think is good..like yours,but not have pause button…cheers from Spain..I subscribe!!!

  5. I hope some one can help me?

    The play and mute button are sitting beside each other, I have checked my code over and over several times but I can't find anything wrong.

    HTML

    <!doctype html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Untitled Document</title>
    </head>

    <style>

    #playButton {
    outline: none;
    border: none;
    width: 32px;
    height: 32px;
    background-image: url(../images/playbutton.png);
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    }

    #muteButton {
    outline: none;
    border: none;
    width: 32px;
    height: 32px;
    background-image: url(../images/stopbutton.png);
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    }

    #muteButton:active,#playButton:active {
    position: relative;
    top:2px;
    }

    </style>

    <body>
    <div id="wapper">
    <audio id="mytrack" >
    <source src="../music/LUDWIG VAN BEETHOVEN.mp3" type="audio/mp3"/>
    </audio>
    <nav>
    <div id="defaultBar">
    <div id="progressBar"></div>
    </div>
    <div id="buttons">
    <button type="button" id="playButton" onclick="playOrPause()"></button>
    <button type="button" id="muteButton"></button>
    </div>
    </nav>
    </div>
    <script type="text/javascript" src="controls2.js"></script>
    </body>
    </html>

    JS

    var mytrack = document.getElementById('mytrack');
    var playButton = document.getElementById('playButton');

    playButton.addEventListener('click',playOrPause,false);

    function playOrPause() {
    "use strict";
    if (!mytrack.paused && !mytrack.ended) {
    mytrack.pause();
    playButton.style.backgroundImage = 'url(../images/playbutton.png)';
    }
    else {
    mytrack.play();
    playButton.style.backgroundImage = 'url(../images/stopbutton.png)';
    }
    }

  6. when i click play, there is a blue square border surrounding it T^T on my css i added the "border:none;" code but it doesn't seem to be making an effect D:

  7. Hi Quentin, I love this tutorial but for some reason, my code is not playing my track with the controls activated. so far it's like this:
    HTML:
    <audio controls id="mytrack">
                <source src="http://www.w3schools.com/html/horse.ogg" type="audio/ogg" /><source src="http://www.w3schools.com/html/horse.mp3" type="audio/mpeg" />
                <a href="http://www.w3schools.com/html/horse.mp3">horse</a>
             </audio>
                        <nav id="mpaudio">
                            <div id="defaultbar">
                                <div id="progressbar"></div>
                            </div>
                            <div id="buttons">
                                <button type="button" id="playbutton" onlclick="playOrPause"></button>
    JAVASCRIPT:
    var mytrack = document.getElementById('mytrack');

    function playOrPause() {
        "use strict";
        if (!mytrack.paused && !mytrack.ended) {
            mytrack.pause();
        } else {
            mytrack.play();
        }
    }

    I'm really not too sure why this is happening. If you can help me out that would be great 😀 And thanks again

  8. Hi Quentin, first of all thanks for such a great tutorials. Your tutorials helped me a lot…
    But, when I added the respective lines for the playButton image charge in javascript, it didn't worked at first. Then I tried to debug it using java console, and it turned out that problem was because of the different directory structure I was using. It looks like that
    "playButton.style.backgroundImage = 'url(../img/pause.png)';" command was taking address relative html file, not css file or js file. When I replace that command by "playButton.style.backgroundImage = 'url(img/pause.png)';", it started working. I don't know why is it taking the address relative to html file, as the command is in js file and it's altering css setting, so I thought url should be relative to one of these two files, not html file. Can you explain what's going on.

    NOTE: my directory structure:
    html file : "%project folder%/index.html"
    css file : "%project folder%/css/main.css"
    js file : "%project folder%/js/controls.js"

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.