Question

我可以使用音频，但是img作为按钮存在问题。他们不会一起移动，而是分开移动。它不仅显示了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>

任何帮助将不胜感激！

Answer 1

尝试这种方式

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

Answer 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" />';

Answer 3

您需要在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>

单击按钮后，如何获得一个可播放音频的img按钮？

3 个答案: