Home/ Questions/Q 8122635
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-06T05:53:41+00:00

I’m regretfully a total noob to html so I was hoping you could answer

  • 0

I’m regretfully a total noob to html so I was hoping you could answer my question.

I’m trying to implement three audio files on my webpage but only one of the source files is playing. The buttons for the other files work, but they only play from the one source. Can you help me?

Here’s the code:

<div class="sound1">
        <div style="text-align:center; width:100px; height:100px; margin-left:390px; margin-top:0px; background-repeat:no-repeat; "> 
            <button style="background-image:url(speaker_bakur.png); width:100px; height:100px; border:transparent;
                ; "margin-top:0px; margin-left:0px;" onclick="playPause();" ></button> 

                <audio id="Sound">
                <source src="" type="audio/wav" />
                <source src="" type="audio/ogg" />
                <source src="svartbakur-4.mp3" type="audio/mpeg" />
                </audio> 
                </div>

                <script type="text/javascript"> 
                var myAudio=document.getElementById("Sound"); 

                function playPause()
                { 
                if (myAudio.paused) 
                myAudio.play(); 
                else 
                myAudio.pause(); 
                }

                </script>

                </div>

                </div><!--Div hyphenate-->


<div class="sound2">
                <div style="text-align:center; width:100px; height:100px; margin-left:390px; margin-top:0px; background-repeat:no-repeat; "> 
                <button style="background-image:url(speaker_likka.png); width:100px; height:100px; border:transparent;
                ; "margin-top:0px; margin-left:0px;" onclick="playPause();" ></button> 

            <audio id="Sound">
                <source src="" type="audio/wav" />
                <source src="" type="audio/ogg" />
                <source src="likka-6.mp3" type="audio/mpeg" />
            </audio> 
        </div>

        <script type="text/javascript"> 
            var myAudio=document.getElementById("Sound"); 

            function playPause()
            { 
                if (myAudio.paused) 
                myAudio.play(); 
                else 
                myAudio.pause(); 
            }

            </script>

    </div>

    </div><!--Div hyphenate-->


<div class="sound3">
        <div style="text-align:center; width:100px; height:100px; margin-left:390px; margin-top:0px; background-repeat:no-repeat; "> 
            <button style="background-image:url(speaker_fiskimasi.png); width:100px; height:100px; border:transparent;
                ; "margin-top:0px; margin-left:0px;" onclick="playPause();" ></button> 

                <audio id="Sound">
                <source src="" type="audio/wav" />
                <source src="" type="audio/ogg" />
                <source src="fiskimasi-21.mp3" type="audio/mpeg" />
                </audio> 
                </div>

                <script type="text/javascript"> 
                var myAudio=document.getElementById("Sound"); 

                function playPause()
                { 
                if (myAudio.paused) 
                myAudio.play(); 
                else 
                myAudio.pause(); 
                }

                </script>

                </div>

                </div><!--Div hyphenate-->

Thank you so much!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Here is how to play the multiple audio from one single JavaScript function:

    <HTML>
<head>
<title>aa</title>
 <script type="text/javascript"> 
function playPause(x)
{ 
    var myAudio=document.getElementById(x); 
    if (myAudio.paused) 
    myAudio.play(); 
    else 
    myAudio.pause(); 
}
</script>
</head>
<body>
<div class="sound1">
    <div style="text-align:center; width:100px; height:100px; margin-left:390px; margin-top:0px; background-repeat:no-repeat; "> 
            <audio id="Soundx1">
                <source  src="XXXXX.mp3" type="audio/mp3">
            </audio> 
            <button style="background-image:url(speaker_bakur.png); width:100px; height:100px; border:transparent; margin-top:0px; margin-left:0px;" onclick="playPause('Soundx1');" ></button> 
     </div>
</div>
<div class="sound2">
            <div style="text-align:center; width:100px; height:100px; margin-left:390px; margin-top:0px; background-repeat:no-repeat; "> 
        <audio id="Soundx2">
        <source  src="XXXXX.mp3" type="audio/mp3" />
        </audio> 
            <button style="background-image:url(speaker_likka.png); width:100px; height:100px; border:transparent; margin-top:0px; margin-left:0px;" onclick="playPause('Soundx2');" ></button> 
    </div>
</div>
<div class="sound3">
    <div style="text-align:center; width:100px; height:100px; margin-left:390px; margin-top:0px; background-repeat:no-repeat; "> 
            <audio id="Soundx3">
            <source  src="XXXXXX.mp3" type="audio/mp3" />
            </audio> 
        <button style="background-image:url(speaker_fiskimasi.png); width:100px; height:100px; border:transparent; margin-top:0px; margin-left:0px;" onclick="playPause('Soundx3');" ></button> 
    </div>
</div>
</body>
</html>
    • 0