Остановка звука при переключении

02.12.2021, 15:56. Показов 412. Ответов 0

Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам

Есть скрипт, который при каждом клике переключает звук.
Но при переходе на новый звук, предыдущий звук не выключается.
Попробуйте нажать на кнопку 6-8 раз подряд и вы сами все поймете.
Как сделать так, чтобы предыдущий звук вырубался при переключении на следующий звук.

Ссылка на готовый пример(Codepen):
https://codepen.io/Viperx/pen/xxXGENj

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
let audio1 = new Audio('https://drive.google.com/u/0/uc?id=1wBlae0CBF5LQ5BlkPFkFfcZ4hcetYCQE&export=download');
let audio2 = new Audio('https://drive.google.com/u/0/uc?id=1qCJjhIGgJDSAushprQpPbE9rMNYr0YO9&export=download');
let audio3 = new Audio('https://drive.google.com/u/0/uc?id=1aeV_oyfFWnDY8vAJGleHCPLf0J6c_dRl&export=download');
 
let a = document.querySelector('.opa');
let storage = [audio1, audio2, audio3];
let count = 0;
 
a.addEventListener('click', function(){
 
if(count == storage.length){
count = 0;  
}   
  
storage[count].play();
console.log(count);
count = count +1;
});

HTML5
1
2
3
4
5
6
7
<button class = 'opa'>БЫРО ИГРАЙ!</button>
 
<div class ="main">
<div class ="item"> 1</div>
<div class ="item"> 2</div>
<div class ="item"> 3</div>
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.opa{
margin-top: 50px;   
padding:10px;
margin-left:130px;
}
 
.main{
margin-top: 50px;   
width: 120px;
margin-left:100px;  
background: black;
padding: 30px;
}
 
.item{
margin-top:20px;
background:gray;
width:100%;
height:120px;   
border-radius: 200px;
}

Programming

Эксперт

39485 / 9562 / 3019

Регистрация: 12.04.2006

Сообщений: 41,671

Блог

02.12.2021, 15:56

Ответы с готовыми решениями:

Как при переключении кнопки <input radio> выводить разные данные?
У меня есть форма для заявки. Там кнопка input radio: До обеда и После обеда. Хочу чтоб при выборе значения до обеда выводилось время...

Проигрывание музыки при переключении страниц
Привет! Помогите реализовать более простым методом, хочу чтобы музыка играла при переходе по страницам сайта. Сам сайт http://elmusic.su

Тормозит setInterval при переключении вкладки
Здравствуйте, есть проблема, связанная с тем, что браузеры сильно замедляют работу setInterval если страница не активна(если переключились...

Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.

inter-admin

Эксперт

29715 / 6470 / 2152

Регистрация: 06.03.2009

Сообщений: 28,500

Блог

02.12.2021, 15:56

Помогаю со студенческими работами здесь

Смена атрибута, при переключении option
Подскажите пожалуйста как сделать, чтоб при переключении option, атрибут @video в элементе <i class="video"></i>...

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

Сброс select при переключении родительского radio
Вот есть такой код, http://gogas2608.tmweb.ru/depcalc.htm сам калькулятор, как сделать так, что бы при переключении кнопки radio...

Перевод сайта на другой язык при переключении переключателя
Есть сайт, на нём я сделал переключатель для смены языка, нужно сделать javascript часть, с правильными условиями, также я добавил...

При переключении слайдеров в slick слайдер съезжает блок
Установила два слайда с помощью slick слайдера, которые переключаются между собой при нажатии на ссылку выше. При переключении с одно...

Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .	Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .
И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»	SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .

Наверх