jQuery:多个音频播放器按钮 [英] jQuery: Multiple audio player buttons
本文介绍了jQuery:多个音频播放器按钮的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我要制作4个播放mp3音频的播放按钮.播放功能每4个按钮起作用一次,但是不幸的是,暂停对这两个按钮都不起作用.也许暂停条件是错误的?
I would like to make 4 play buttons which plays mp3 audio. The play function is working every 4 buttons, but unfortunately the pause is not working for either of them. Maybe the pause condition is wrong?
<div class="audio-button">
<audio src="media/test.mp3"></audio>
</div>
<div class="audio-button">
<audio src="media/test2.mp3"></audio>
</div>
<div class="audio-button">
<audio src="media/test3.mp3"></audio>
</div>
<div class="audio-button">
<audio src="media/test4.mp3"></audio>
</div>
$(document).ready(function() {
var playing = false;
$('.audio-button').click(function() {
$(this).toggleClass("playing");
var song = $(this).find('audio').attr('src');
var audio = new Audio(song);
if (playing == false) {
audio.play();
playing = true;
} else {
audio.pause();
playing = false;
}
});
});
推荐答案
您需要直接从按钮中获取音频元素,并与之交互.您无需使用构造函数克隆Audio
对象.
You need to grab the audio element directly from the button as a child and interact with that. You do not need to clone the Audio
object using a constructor.
$(document).ready(function() {
var playing = false;
// Add file names.
$('.audio-button').each(function() {
var $button = $(this);
var $audio = $button.find('audio');
$($('<span>').text($audio.attr('src'))).insertBefore($audio);
});
// Add click listener.
$('.audio-button').click(function() {
var $button = $(this);
var audio = $button.find('audio')[0]; // <-- Interact with this!
// Toggle play/pause
if (playing !== true) {
audio.play();
} else {
audio.pause();
}
// Flip state
$button.toggleClass('playing');
playing = !playing
});
});
.fa.audio-button {
position: relative;
display: block;
width: 12em;
height: 2.25em;
margin-bottom: 0.125em;
text-align: left;
}
.fa.audio-button:after {
position: absolute;
right: 0.8em;
content: "\f04b";
}
.fa.audio-button.playing:after {
content: "\f04c";
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="fa audio-button">
<audio src="media/test.mp3"></audio>
</button>
<button class="fa audio-button">
<audio src="media/test2.mp3"></audio>
</button>
<button class="fa audio-button">
<audio src="media/test3.mp3"></audio>
</button>
<button class="fa audio-button">
<audio src="media/test4.mp3"></audio>
</button>
这篇关于jQuery:多个音频播放器按钮的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文