Javascript - второе воспроизведение звука по клику не работает

У меня проблема с моим скриптом для воспроизведения звука по клику. Я могу играть только один звук за раз (.add или .remove), но он не воспроизводит звук второй кнопки.

Работает только одна кнопка.

Что я здесь делаю не так...?

Заранее спасибо!

<button class = "add">ADD TO CART</button>

<button class = "remove">REMOVE</button>

//----------------

var audioAdd=new Audio('add.mp3');
$('.add').click(()=>audioAdd.play()
);

var audioRemove=new Audio('remove.mp3');
$('.remove').click(()=>audioRemove.play()
);

//----------------

// For test:

/*

https://notificationsounds.com/soundfiles/8b16ebc056e613024c057be590b542eb/file-sounds-1113-unconvinced.mp3

https://notificationsounds.com/soundfiles/99c5e07b4d5de9d18c350cdf64c5aa3d/file-sounds-1110-stairs.mp3

*/

javascript audio

30.04.2019 19:25

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

229

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

последовательные клики не будут работать, так как предыдущий процесс воспроизведения будет продолжаться. вы не можете играть в один экземпляр несколько раз одновременно. вы должны дождаться завершения процесса воспроизведения.

вы можете сделать что-то вроде этого

let audioHolder = {};

$('.add').click(()=>{
  let tempIdentifier = Date.now();
  audioHolder[tempIdentifier] = new Audio('add.mp3');
  audioHolder[tempIdentifier].play();

  // removing after play process gets over so if won't consume memory
  setTimeout(() => {
    delete audioHolder[tempIdentifier];
  }, audioHolder[tempIdentifier].duration + 400 /* you can remove threshold value if you wants to */);
});

// audioHolder[tempIdentifier].duration gives audio duration
// and adding some threshold so
// it will delete after it's played ( just to be safe )

/* same for other click */

это будет работать для каждого клика

Спасибо Экскалибур

— 30.04.2019 20:13

30.04.2019 20:11