Как добавить переключатель воспроизведения / паузы для нескольких изображений по клику с разными аудиоисточниками

1

У меня есть несколько изображений с функцией onclick для воспроизведения разных источников звука для каждого отдельного изображения. Тем не менее, мне также нужна функция переключения/воспроизведения/паузы, которая, если вы снова нажмете на одно и то же изображение, звучит пауза.

Я попытался включить.pause() и функцию переключения, но я просто не заработал. У вас есть идеи и предложения, как использовать функцию паузы и/или переключения в этом случае?

Вот моя скрипка

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/[email protected]" 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/[email protected]" 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>
Теги:

3 ответа

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();
  }
}
Поделиться
  • 0
    Благодарю. Этот работает отлично!
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/[email protected]" 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/[email protected]" 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>
Поделиться
  • 0
    Спасибо за ваш ответ. Я попробовал и этот, и работает отлично!
0

Есть несколько способов сделать это! Использовать paused свойство

var audiolinks = document.querySelectorAll("a");

//loop over all links | audiolinks is a nodelist without forEach - use Array 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/[email protected]" 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/[email protected]" 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>
Поделиться
  • 0
    Спасибо, но если я попробую этот код, кажется, что он воспроизводит только аудио a для первых двух изображений и аудио c для последнего изображения. Тем не менее, спасибо

Ещё вопросы

Сообщество Overcoder
Наверх
Меню