[英]Make a span to play music(mp3) with JavaScript
我需要您的幫助,因為我想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()
})
假設您希望它在單擊時播放音樂; 您需要創建音頻對象; 藏起來
<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
是Enter鍵。
希望能有所幫助。
添加到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();
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.