我有多个具有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>
&#13;
答案 0 :(得分:2)
您可以使用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();
}
}
答案 1 :(得分:1)
您可以通过检查其paused
属性来检查音频是否正在播放。您还必须检查音频是否从未启动,您可以使用currentTime
属性执行此操作。
以下是一个例子:
var aAudio = new Audio('a.mp3');
var bAudio = new Audio('b.mp3');
var cAudio = new Audio('c.mp3');
function myAudioFunction(letter) {
toggleAudio(window[letter+"Audio"]);
}
function toggleAudio(audioElm){
if(!audioElm.currentTime || audioElm.paused){
audioElm.play();
}else{
audioElm.pause();
}
}
<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>
答案 2 :(得分:0)
有几种方法可以做到这一点!使用paused
属性
var audiolinks = document.querySelectorAll("a");
//loop over all links | audiolinks is a nodelist without forEach - use Array's forEach
Array.prototype.forEach.call(audiolinks, function(element, index) {
element.addEventListener("click", function() {
myAudioFunction(index);
})
});
var aAudio = new Audio('a.mp3');
var bAudio = new Audio('b.mp3');
var cAudio = new Audio('c.mp3');
var audioPlaying = "|"; //use | to avoid selecting Audio element
function myAudioFunction(index) {
res = String.fromCharCode(97 + index);
//select char (a, b, etc.) and use bracket to combine it with audio.
if (window[audioPlaying + "Audio"]) {
if (!window[audioPlaying + "Audio"].paused && res == audioPlaying) {
console.log("pause", audioPlaying);
window[audioPlaying + "Audio"].pause();
} else if (!window[audioPlaying + "Audio"].paused && res != audioPlaying) {
console.log("stop", audioPlaying);
window[audioPlaying + "Audio"].pause();
window[audioPlaying + "Audio"].currentTime = 0;
} else {
console.log("play", audioPlaying);
window[audioPlaying + "Audio"].play();
}
}
//if res isn't audioPlaying, start the audio
if (res != audioPlaying) {
console.log("play", res);
window[res + "Audio"].play();
audioPlaying = res;
}
}
<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 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 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>