1

很遗憾，我对 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-->

非常感谢！

4

4 回答 4

0

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

最好将controls属性添加到audio标签中。

于 2012-06-22T16:30:55.273 回答
0

播放器正在寻找 ID“声音”。

getElementById("Sound");

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

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

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

于 2012-06-22T16:31:28.837 回答
0

我刚刚测试并发现您的问题与您用于播放音频文件的 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>

所以我有什么变化：

  1. 音频 id=每个音频文件唯一
  2. 每个音频 ID 的唯一 JavaScript 对象为 var myAudioXX=document.getElementById("_unique_id_");

此代码确实适用于多个 mp3 文件。此外，您应该使用一个 JavaScript 函数来播放所有文件，而不是使用 each 函数来播放每个文件。如果您将使用一个 JavaScript 函数来播放所有文件，则可以通过对象引用传递 ID 标记，它将简化为代码。

于 2012-06-22T17:06:44.560 回答
0

以下是如何从一个 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>
于 2012-06-22T17:26:03.170 回答