Question

我很遗憾html总是对html这样，所以我希望你能回答我的问题。

我正在尝试在我的网页上实现三个音频文件，但只有一个源文件正在播放。其他文件的按钮有效，但它们只能从一个源播放。你能救我吗？

以下是代码：

<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-->

非常感谢你！

Answer 1

您有多个具有相同ID的元素。您每次都在重新定义playPause()函数。一般来说，你似乎不知道自己在做什么。

您最好只将controls属性添加到audio代码中。

Answer 2

玩家正在寻找id“Sound”。

getElementById("Sound");

你有3 <audio id="Sound"> s

尝试将它们改为<audio id="Sound1">和<audio id="Sound2">等

您需要更新播放器以反映新的音频ID。

Answer 3

我刚刚测试过，发现您的问题与您用来播放音频文件的JavaScript代码以及定义音频代码的方式有关，因为一个标记与所有mp3文件绑定：

<div style="text-align:center; width:100px; height:100px; margin-left:390px; margin-top:0px; background-repeat:no-repeat; "> 
   <audio id="Soundx1">
     <source  src="XXXXXX.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();" ></button> 
     </div>
     <script type="text/javascript"> 
        var myAudio1=document.getElementById("Soundx1"); 
        function playPause()
        { 
            if (myAudio1.paused) 
            myAudio1.play(); 
            else 
            myAudio1.pause(); 
        }
    </script>
</div>

所以我有什么变化：

音频ID = 每个音频文件都是唯一的
每个音频ID的唯一JavaScript对象 var myAudioXX = document.getElementById（“_ unique_id _”）;

这段代码可以工作多个mp3文件。此外，您应该使用一个JavaScript函数来播放所有文件而不是每个func来播放每个文件。如果您将使用一个JavaScript函数来播放所有文件，您可以通过对象引用传递ID标记，它将减少为代码。

Answer 4

以下是如何从一个JavaScript函数播放多个音频：

<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>

试图在网页上实现两个音频文件

4 个答案: