我有多个具有 onclick 功能的图像,可以为每个单独的图像播放不同的音频源。但是,我还想要一个切换或播放/暂停功能,如果您再次单击同一图像,音频将暂停。
我曾尝试合并 .pause() 和切换功能,但我就是没让它正常工作。你们有什么想法和建议如何在这种情况下使用暂停和/或切换功能吗?
这是我的 fiddle
var aAudio = new Audio('a.mp3');
var bAudio = new Audio('b.mp3');
var cAudio = new Audio('c.mp3');
function myAudioFunction(letter) {
if (letter == 'a') {
aAudio.play();
} else if (letter == 'b') {
bAudio.play();
} else if (letter == 'c') {
cAudio.play();
}
}
<a onclick="myAudioFunction('a')" style="cursor:pointer;" title="Facebook" target="_blank">
<img src="https://d2fi4ri5dhpqd1.cloudfront.net/public/resources/social-networks-icon-sets/circle-dark-gray/facebook.png" alt="Facebook" width="32" style="outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;clear: both;display: block !important;border: none;height: auto;float: none;max-width: 32px !important">
</a>
<a onclick="myAudioFunction('b')" style="cursor:pointer;" title="Vkontakte" target="_blank">
<img src="https://d2fi4ri5dhpqd1.cloudfront.net/public/resources/social-networks-icon-sets/circle-dark-gray/vkontakte@2x.png" alt="Vkontakte" title="Vkontakte" width="32" style="outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;clear: both;display: block !important;border: none;height: auto;float: none;max-width: 32px !important"
/>
</a>
<a onclick="myAudioFunction('c')" style="cursor:pointer;" title="Vkontakte" target="_blank">
<img src="https://d2fi4ri5dhpqd1.cloudfront.net/public/resources/social-networks-icon-sets/circle-dark-gray/vkontakte@2x.png" alt="Vkontakte" title="Vkontakte" width="32" style="outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;clear: both;display: block !important;border: none;height: auto;float: none;max-width: 32px !important"
/>
</a>
最佳答案
您可以结合使用 paused
属性和 currentTime
属性来判断按下按钮时音频元素是否需要暂停或播放。
function myAudioFunction(letter) {
var players = {
a: aAudio,
b: bAudio,
c: cAudio
};
var player = players[letter];
if (player.currentTime == 0 || player.paused) {
player.play();
} else {
player.pause();
}
}
关于javascript - 如何为具有不同音频源的多个点击图像添加播放/暂停切换,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46991142/