Question

我有一个学校项目，不能使用Java，只能使用HTML和CSS。主题是“幸运卢克（Lucky Luke）”，我正在尝试在单击图像时播放音频。

想法是当我单击图像时播放音频。

<div id="luckyShoot">
    <img src="images/lucky_luke_shooting.png">
</div>

<div id="song"> 
    <audio>
    <source src="audio/soundtrack.wav" type="audio/wav">
    </audio>
</div>

Answer 1

有趣的问题。

这是您的解决方案

示例和演示：

只要您在Chrome浏览器中对其进行测试，以下代码就会在该图片上点击并发出骏马的声音。

div#lH {
  position: absolute;
  width: 30px;
  height: 30px;
  overflow: hidden;
  z-index: 1;
  font-size: 25px;
  text-align:center;
}
audio#aH {
  position: absolute;
  top: -5px;
  left: -5px;
  z-index: 2;
  opacity: 0.01;
}

 <div id="lH">
<audio controls id="aH">
  <source src="http://www.w3schools.com/html/horse.ogg" type="audio/ogg">
  <source src="http://www.w3schools.com/html/horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<img src="https://static.rfstat.com/bloggers_folders/user_50017/my_media/184c7a0c-9df2-451e-8e4b-759c30eb5453.png" />
</div>

您可以编辑或预览代码Here on JSFiddle

Answer 2

let audio = document.getElementById("myAudio")

function playMySong(){
    if(audio.paused){
        audio.play()
    } else {
        audio.pause()
    }
}

img {
    width:250px;
    height:250px;
    cursor:pointer;
}

<div id="luckyShoot">
    <img src="https://static.rfstat.com/bloggers_folders/user_50017/my_media/184c7a0c-9df2-451e-8e4b-759c30eb5453.png" onClick="playMySong()">
</div>

<div id="song"> 
    <audio id="myAudio" controls>
        <source src="https://www.computerhope.com/jargon/m/example.mp3" type="audio/mp3">
    </audio>
</div>

单击图像时如何播放音频？

2 个答案: