使用jQuery单独播放每个音频元素

Question

我在一个HTML页面中有多个<audio>元素。问题是jQuery脚本一起播放所有音频，我需要它单独播放它们。

我部署它是为了让您更好地了解：https://suspicious-williams-5196e6.netlify.app/

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="inline-bl" style="display: inline;">
<a href="#" title="Listen to the song" class="player-controls">
<span class="play"></span>
<span class="pause"></span>
</a>
<audio id="player">
<source src="https://www.dropbox.com/s/t32waag3ib20b28/OneDance-Drake.mp3?raw=1" type="audio/mp3">
</audio>
</div>

var getaudio = $('#player')[0],
mouseovertimer,
audiostatus = 'off',
playerControls = ".player-controls";
$(document).on('click touch', playerControls, function(e) {
e.preventDefault();
if (!$(playerControls).hasClass("playing")) {
if (audiostatus == 'off') {
$(playerControls).addClass('playing');
getaudio.load();
getaudio.play();
window.clearTimeout(mouseovertimer);
audiostatus = 'on';
return false;
} else if (audiostatus == 'on') {
$(playerControls).addClass('playing');
getaudio.play();
}
} else if ($(playerControls).hasClass("playing")) {
getaudio.pause();
$(playerControls).removeClass('playing');
window.clearTimeout(mouseovertimer);
audiostatus = 'on';
}
return false;
});
$('#player').on('ended', function() {
$(playerControls).removeClass('playing');
audiostatus = 'off';
});

.player-controls {
color: #fff;
cursor: pointer;
display: inline-block;
font-size: 40px;
height: 1.25em;
position: relative;
text-decoration: none;
width: 1.75em;
-webkit-transition: transform 0.25s ease-in-out;
transition: transform 0.25s ease-in-out;
}
.player-controls .play,
.player-controls .pause {
display: block;
background: url("images/play.svg?raw=1") no-repeat 0 0;
background-size: 100% 100%;
height: 1.75em;
position: absolute;
width: 1.75em;
z-index: 5;
}
.player-controls .play::before,
.player-controls .pause::before,
.player-controls .play::after,
.player-controls .pause::after {
-webkit-border-radius: 1000px;
-moz-border-radius: 1000px;
border-radius: 1000px;
content: "";
display: block;
position: absolute;
height: 1.75em;
right: 0;
top: 0;
width: 1.75em;
z-index: 0;
}
.player-controls .play::before {
box-shadow: 0 0 0 rgba(255, 255, 255, 0);
-webkit-transition: all 0.25s linear;
transition: all 0.25s linear;
}
.player-controls .pause {
background-image: url("images/pause.svg?raw=1");
opacity: 0;
right: 0;
top: 0;
}
.player-controls.playing .play {
opacity: 0;
}
.player-controls.playing .pause {
opacity: 1;
}
.player-controls:hover {
transform: scale(1.1);
}

Answer 1

在选择音频元素时，需要像这样使用jquery来使用同级选择器。

var mouseovertimer,
audiostatus = 'off',
playerControls = ".player-controls";

$(document).on('click touch', playerControls, function(e) {
var getaudio = $(this).siblings('audio');
e.preventDefault();
if(!$(this).hasClass("playing")) {
if(audiostatus == 'off') {
$(this).addClass('playing');
getaudio[0].load();
getaudio[0].play();
window.clearTimeout(mouseovertimer);
audiostatus = 'on';
return false;
} else if(audiostatus == 'on') {
$(this).addClass('playing');
getaudio[0].play();
}
} else if($(this).hasClass("playing")) {
getaudio[0].pause();
$(this).removeClass('playing');
window.clearTimeout(mouseovertimer);
audiostatus = 'on';
}
return false;
});
$('#player').on('ended', function() {
$(playerControls).removeClass('playing');
audiostatus = 'off';
});

尝试用上面的代码替换jquery代码。

我在你的代码中所做的更改：

• 我已经在事件侦听器中下移了getaudio实例化
• 此外，在实例化它时，请确保您这样使用它：var getaudio = $(this).siblings('audio');

还从所有<audio>标签中删除id，因为它们是重复的，这并没有任何作用！