Trying to Pause/Play MP3 file in HTML-CodePudding

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 >
        <div >
            <img src="img/image1.jpg" alt="img"/ height="100%" width="100px">
        </div>
        <div >
            <img src="img/image2.jpg" alt="img"/ height="100%" width="100px">
        </div>
        <div >
            <img src="img/image3.png" alt="img"/ height="100%" width="100px">
        </div>
        <div >
            <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(); 
}

CodePudding user response：

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.

CodePudding user response：

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 >
        <div >
            <img src="img/image1.jpg" alt="img"/ height="100%" width="100px">
        </div>
        <div >
            <img src="img/image2.jpg" alt="img"/ height="100%" width="100px">
        </div>
        <div >
            <img src="img/image3.png" alt="img"/ height="100%" width="100px">
        </div>
        <div >
            <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(); 
}