使用JavaScript制作一个播放音乐（mp3）的跨度

Question

我需要你的帮助，因为我想制作一个span来播放音乐。我制作了一个 Javascript 代码并尝试编辑 HTML，但 span 仍然无法点击。我不确定这是否是我想要的最佳解决方案。

这是我的HTML：

<div class="col-md-4">
      <div class="service-box">
        <div class="service-ico">
          <span id="hang1" class="ico-circle"><i class="ion-play"></i></span>
        </div>
        <div class="service-content">
          <h2 class="s-title">Magyar hangminták</h2>
          <p class="s-description text-center">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni adipisci eaque autem fugiat! Quia,
            provident vitae! Magni
            tempora perferendis eum non provident.
          </p>
        </div>
      </div>
    </div>

这是 JS：

var hang1 = new Audio();
hang1.src = "hang1.mp3"

$("#myspan").click(function(){
    hang1.play()
})

Answer 1

假设您希望它在点击时播放音乐；您需要创建音频对象；并隐藏它

<audio id="audio" controls style="display:none">
  <source src="\youraudio path.mp3" type="audio/mpeg"> 
</audio>

然后用一个EventListener作为要按的右键：

document.addEventListener('keydown', function(e) {
  if (e.keyCode == 13) {
    document.getElementById('audio').play();
  }
});

在这个例子中 13 是回车键。

希望对您有所帮助。

Answer 2

添加到 html <audio> 标签和其中的音乐来源。

HTML

<audio id="myAudio">
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
</audio>

<div class="col-md-4">
  <div class="service-box">
    <div class="service-ico">
       <button onclick="playAudio()" type="button"><span id="hang1" class="ico- 
       circle"><i class="ion-play"></i></span></button>
    </div>
    <div class="service-content">
      <h2 class="s-title">Magyar hangminták</h2>
      <p class="s-description text-center">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni adipisci eaque 
        autem fugiat! Quia,
        provident vitae! Magni
        tempora perferendis eum non provident.
      </p>
    </div>
  </div>

JS

var x = document.getElementById("myAudio"); 

function playAudio() { 
  x.play(); 
}

使用JavaScript制作一个播放音乐（mp3）的跨度

Make a span to play music(mp3) with JavaScript

html

javascript

mp3