单击按钮时如何获得播放音频的图像按钮？答案

【问题标题】：How can I get an img button that plays audio when you click the button?单击按钮时如何获得播放音频的图像按钮？
【发布时间】：2019-01-06 14:43:09
【问题描述】：

我的音频可以正常工作，但我的 img as 按钮有问题。它们不会一起移动，而是分开移动。它不仅是显示的 img，还有按钮本身，我只想让 img 成为按钮。

我还希望按钮移到页面的后面并且不占用任何空间。当我使用 z-index: -1;按钮功能消失，不再作为按钮使用。

代码如下：

 <!DOCTYPE html>
<html>


<div class="omheen">
<div>
<audio id="audioContainer">
 <source src="spraakbericht.m4a" type="audio/mpeg">
</audio>

<div id="memo">
 <button  id="play" onclick="playMp3()" type="button">
 <img class="memo" src="messages-05.png"/>
</div>
</button>
 <button id="pause" onclick="pauseMp3()" type="button">Pause Mp3</button> 

 </div>
</div>

<script>
 const audioContainer = document.getElementById("audioContainer"); 

 function playMp3() { 
  audioContainer.play(); 
} 

function pauseMp3() { 
 audioContainer.pause(); 
} 


</script>

<script>
 var play = document.getElementById("play");
 var pause = document.getElementById("play");
 play.innerHTML = '<img src="\messages-05.png" />';
 pause.innerHTML = '<img src="\messages-05.png" />';
</script>   





</html>

非常感谢任何帮助！

【问题讨论】：

标签： javascript html css

【解决方案1】：

您需要在您的 html 中设置一个元素，并将 src 设置为您的声音文件，同时给它一个 id。使用 document.getElementByID 获取对该音频元素的引用并将其设置为变量。在您的按钮上设置一个 onclick 属性，并在该函数定义链中将 play() 方法从引用您的音频元素的变量中移除。

<audio src="./myaudio.mp3" id="myAudio"></audio>
<button onclick="playAudio()">Click To Play Audio</button>

<script>
    let myAudio = document.getElementByID("myAudio");
    function playAudio(){
        myAudio.play();
    }
</script>

【讨论】：

【解决方案2】：

这是在 HTML 中播放音频的方法：

<!DOCTYPE html>
<html>
<body>

<audio id="audioContainer">
  <source src="myMp3.mp3" type="audio/mpeg">
</audio>

<p>Click the buttons to play or pause the audio.</p>

<button id="play" onclick="playMp3()" type="button">Play Mp3</button>
<button id="pause" onclick="pauseMp3()" type="button">Pause Mp3</button> 

<script>
const audioContainer = document.getElementById("audioContainer"); 

function playMp3() { 
  audioContainer.play(); 
} 

function pauseMp3() { 
  audioContainer.pause(); 
} 
</script>

</body>
</html>

将图像添加到按钮的背景

var play = document.getElementById("play");
var pause = document.getElementById("play");
play.innerHTML = '<img src="images/play.png" />';
pause.innerHTML = '<img src="images/pause.png" />';

【讨论】：

好的，谢谢，它们现在是按钮并且有音频了！我只是无法让图像正常工作。他似乎找不到我的图像.. src="/Bureaublad/HKU/Jaar2/Manifest/Lyanna/messages-05.png" />';我现在已经带路到该位置，但找不到 img。我在这部分做错了什么吗？谢谢！
嘿，您需要使用相对于您的文件的路径。如果您的根目录是“myProject”，则您的图像文件夹位于名为 images 的子文件夹内的该文件夹中，而您的脚本位于根目录（项目文件夹）中，您将使用“./images/myFile.png”
都在同一个文件夹中！没有图像文件夹。我无法让 img 作为按钮工作。他们一直分开。我试图将其设为背景图像，但这也不起作用！真的很奇怪，因为我认为这会起作用！
您也可以使用 div 代替按钮。如果你使用

然后img消失了..我不知道了哈哈

【解决方案3】：

试试这个方法

     <input type="button" value="press play"  onclick="melody()">
       <audio id="html" src="anypath" ></audio>

      <script>
      function melody() {
     var audio = document.getElementById("html");
       audio.play();
       }
      </script>

【讨论】：

我调整了 JS 和 HTML，但它仍然没有响应甚至是一个按钮？
在html中使用
如果它仍然无法正常工作，您可以发布更多代码吗？