[英]Make a span to play music(mp3) with JavaScript
I need your help, because I want to make a span
to play music. 我需要您的帮助,因为我想
span
播放音乐。 I made a Javascript code and tried to edit the HTML, but the span
is still not clickable. 我编写了Javascript代码并尝试编辑HTML,但是
span
仍然不可点击。 I am not sure that this would be the best solution for what I want. 我不确定这是否是我想要的最佳解决方案。
This is my HTML: 这是我的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>
And this is the JS: 这就是JS:
var hang1 = new Audio();
hang1.src = "hang1.mp3"
$("#myspan").click(function(){
hang1.play()
})
Assuming you want it to play the music upon a click; 假设您希望它在单击时播放音乐; you need to create the audio object;
您需要创建音频对象; and hide it
藏起来
<audio id="audio" controls style="display:none">
<source src="\\youraudio path.mp3" type="audio/mpeg">
</audio>
Then use a EventListener
for the right key to be pressed: 然后使用
EventListener
按下右键:
document.addEventListener('keydown', function(e) {
if (e.keyCode == 13) {
document.getElementById('audio').play();
}
});
in this example 13
being enter key. 在此示例中,
13
是Enter键。
Hope this help. 希望能有所帮助。
Add to html <audio>
tag and the sources of music in it. 添加到html
<audio>
标记及其中的音乐来源。
HTML 的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 JS
var x = document.getElementById("myAudio");
function playAudio() {
x.play();
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.