Question

我正在努力找到一种解决方案和方法来切换游戏和放大器为不同的onclick图像暂停多个音频。

你们有没有想过如何通过再次点击图像来包含暂停。

我找到了onclick功能播放2个不同图像的音频的方法，但我不知道如何通过再次单击图像使其暂停。

这是我的fiddle

谢谢！

<a nohref onclick="clicksound1.playclip()" style="cursor:pointer;" title="Facebook" target="_blank">

Answer 1

要执行此操作，您需要使用javascript。因此，在您的HTML文件中，您可以执行以下操作：

在你的HEAD部分：

<script>
     var yoursound = new Audio();
     yoursound.src = "filename"; 
     function PlaySound() { yoursound.play(); }
</script>

在您的BODY部分：

<audio id="yoursound"> </audio> 
<button onclick="PlaySound()"> ... </button>

Answer 2

HTML：

<audio id="audio" src="sound.mp3" ></audio>
<button onClick="playAudio ('audio')">PLAY!</button>

JS：

function playAudio (var id) {
    document.getElementById(id).play();
}

Answer 3

添加html声音元素：

＆＃13;

<audio id="sound1">
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

＆＃13;

<button onclick="document.getElementById('sound1').play()">Button</button>

＆＃13;

并在按钮上添加onclick事件

阅读本文：

https://www.w3schools.com/tags/tag_audio.asp

https://www.w3schools.com/tags/ref_av_dom.asp

Answer 4

＆＃13;

    <script>
  function play(){
       var audio = document.getElementById("audio");
       audio.play();
                 }
   </script>

<a id="w00t" title="Facebook" target="_blank">
          <img src="https://d2fi4ri5dhpqd1.cloudfront.net/public/resources/social-networks-icon-sets/circle-dark-gray/facebook.png" alt="Facebook" title="Facebook" width="32" style="outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;clear: both;display: block !important;border: none;height: auto;float: none;max-width: 32px !important"onclick="play()">
        </a>  
<audio id="audio" src="http://www.mashuptown.com/files/dj_morgoth_never_gonna_give_your_teen_spirit_up.mp3"type="audio/mp3"> ></audio>

＆＃13;

嘿伙计，

非常感谢您的回答！它帮助我更进一步，找到一些解决方案来解决我的问题。截至目前，我有以下代码。这基本上做了我想做的事情和打算做的事情。单击图片而不是按钮时播放音频。

但是，当您将鼠标悬停在Facebook图标上时，我并不十分满意它不会显示手指图标。我试图用href来解决这个问题，但是我不能完成它而没有它打开一个新的单独的错误选项卡/窗口：{＆＃34;错误＆＃34;：＆＃34;请使用POST请求＆＃34;} < / p>

你们有什么想法如何解决这个问题？谢谢！

如何在不同的图像上切换播放和暂停多个音频src

4 个答案: