Custom audio player tutorial 4 – play and pause



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.