3

Hoping to have two buttons, one to "Pause" one to "Play" the MP3 audio file. Buttons show but do not pause/play the audio, Aswell as the audio does not play whatsoever. Here's my code I'm using. Thanks.

HTML

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Loadingscreen</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="script.js"></script>
</head>
<body>
    <audio controls id="song">
        <source src="audio/music.mp3" type="audio/mpeg">
    </audio>
    <button onclick="playAudio()" type="button">Play</button>
    <button onclick="pauseAudio()" type="button">Pause</button>
    <div class="slides slowFade">
        <div class="slide">
            <img src="img/image1.jpg" alt="img"/ height="100%" width="100px">
        </div>
        <div class="slide">
            <img src="img/image2.jpg" alt="img"/ height="100%" width="100px">
        </div>
        <div class="slide">
            <img src="img/image3.png" alt="img"/ height="100%" width="100px">
        </div>
        <div class="slide">
            <img src="img/image4.jpg" alt="img"/ height="100%" width="100px">
        </div>
    </div>
</body>
</html>

JavaScript

var x = document.getElementById("song"); 

function playAudio() { 
  x.play(); 
} 

function pauseAudio() { 
  x.pause(); 
}
7
  • Works fine for me. do you put the audio next to the HTML file? Commented Mar 9, 2022 at 21:51
  • As in File path of the mp3 file? I have everything right now in a html folder with css file, js file. So should be /html/music.mp3 correct?
    – THC
    Commented Mar 9, 2022 at 22:55
  • Messed around with the file path html/music.mp3 and music.mp3 still haven't gotten it to play with the buttons.
    – THC
    Commented Mar 10, 2022 at 0:21
  • Open your developer tools and see the console tab. Is there any error there? Commented Mar 10, 2022 at 4:56
  • I see these errors while viewing the console in developer tools. Uncaught ReferenceError: playAudio is not defined at HTMLButtonElement.onclick (index.html:14:49) index.html:15 Uncaught ReferenceError: pauseAudio is not defined at HTMLButtonElement.onclick (index.html:15:50) 4index.html:14 Uncaught ReferenceError: playAudio is not defined at HTMLButtonElement.onclick (index.html:14:49)
    – THC
    Commented Mar 10, 2022 at 7:41

2 Answers 2

2

You have to load your js file after loading the document.

You should put the script at the end of the HTML file. You use var x = document.getElementById("song"); to get the DOM element but the element is not loaded yet as your script is on the top of the page so you can change the code this way:

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Loadingscreen</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    
</head>
<body>
    <audio controls id="song">
        <source src="audio/music.mp3" type="audio/mpeg">
    </audio>
    <button onclick="playAudio()" type="button">Play</button>
    <button onclick="pauseAudio()" type="button">Pause</button>
    <div class="slides slowFade">
        <div class="slide">
            <img src="img/image1.jpg" alt="img"/ height="100%" width="100px">
        </div>
        <div class="slide">
            <img src="img/image2.jpg" alt="img"/ height="100%" width="100px">
        </div>
        <div class="slide">
            <img src="img/image3.png" alt="img"/ height="100%" width="100px">
        </div>
        <div class="slide">
            <img src="img/image4.jpg" alt="img"/ height="100%" width="100px">
        </div>
    </div>
    <!-- the DOM will be available here -->
    <script src="script.js"></script>
</body>
</html>

It's a good practice to load JS file at the end of the file that makes the user see HTML faster.

If for any reason you cant load the js file at the end of the page you can change your JS file this way:

function playAudio() { 
const x = document.getElementById("song"); 
  x.play(); 
} 

function pauseAudio() { 
const x = document.getElementById("song"); 
  x.pause(); 
}
1
  • THANK YOU!! Forgot all about that when linking the JavaScript file! Used to throwing it at the top of html file. Seems to be running perfectly now. Buttons do pause/play music. Thank you again! Will edit the post to [FIXED] So anyone comes by dealing with similar issue, this may help.
    – THC
    Commented Mar 10, 2022 at 21:01
0

have you tried using javascript for audio? such as

var myAudio = new Audio(myAudioLink)

then doing

function playMyAudio() {
myAudio.play()
}
function pauseMyAudio() {
myAudio.pause()
}

i am glad to help.

1
  • Hello, thanks for the tip, tried this, didn't see a solution. Was thinking it may be a file path mistake but after adding the folder into the path I still seem to have no audio play with and without the buttons.
    – THC
    Commented Mar 9, 2022 at 23:05

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.