Простейший замены состояния

@Master_Yi · Регистрация: 22.12.2013

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

Все очень просто(ну по идее).
У меня есть один проигрыватель:

HTML5
1
<audio id="audio1" style="width:25%">Canvas not supported</audio>

Есть несколько треков:

HTML5
1
2
<a name="ссылка1" class="playbutton" onclick="togglePlay(this);"><img src="../../images/play.png"></a>
<a name="ссылка2" class="playbutton" onclick="togglePlay(this);"><img src="../../images/play.png"></a>

Которые передают свое значение ссылки на трек из name в src в <audio>, над этим работает скрипт:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
// Create a couple of global variables to use. 
       var audioElm = document.getElementById("audio1"); // Audio element
 
       function togglePlay($enterer) {
         if (audioElm.src == $enterer.name) {
             pauseAudio(audioElm);   //  if player is playing, then pause
         }
         else {
         //pauseAudio(audioElm);
         playAudio(audioElm, $enterer);
         }
       }

Задача такова: нажал на одну ссылку - играет один трек. Если нажал на нее еще раз - затихло все. Нажмешь на второй, этот остановится и начнет играть второй. Просто же! Но до меня не доходит! playAudio и pause соответственно функции запуска треков.
Работает все кроме пауз. Тоесть треки переключаются но остановить их невозможно. Я проверил код логически раз 50, серьезно, я не вижу тут ошибки в логике работы. Где же она?

Благодарю за внимание!

@arcmag · 08.02.2015, 16:42

То есть вам нужно что бы когда вы включаете новый музыкальный файл предыдущий останавливался? Если я правильно понял то по моему вот так вот должно работать

JavaScript
1
2
3
4
5
6
function all_stop(){
    var audio_arr = document.getElementsByTagName("audio");
    for(i=0; i<audio_arr.length; i++){
        audio_arr.item(i).pause();
    }
}

Сначала вызываете эту функцию и когда все активные аудио останавливаются включаете ту которая должна играть.

@Master_Yi · 08.02.2015, 16:45 **[ТС]**

arcmag, Смотрите. Старый музыкальный файл в любом случае остановится ибо ссылка в проигрывателе сменится. Задача исправить код так что бы если ссылка не меняется(тоесть была нажата та же ссылка) срабатывала пауза. Сейчас если нажать на ссылку еще раз(ну что бы остановить) он начинает играть с самого начала.

@arcmag · 08.02.2015, 17:09

Ну не знаю попробуйте вот так вот

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!doctype html>
<html>
<head>
<title>Мммм...</title>
<script>
    function player_a(elem){
        var audioElm = document.getElementById("audio1"); 
        if(elem.classList.contains("active")){
            elem.classList.remove("active");
            elem.classList.add("pause");
            audioElm.pause();
        }// если при средующем нажатии у кнопки имеется класс active мы оставливаем аудио и заменяем этот клас на класс pause
        else if(elem.classList.contains("pause")){
            elem.classList.remove("pause");
            elem.classList.add("active");
            audioElm.play();
        }// если при средующем нажатии у кнопки имеется класс pause мы снова запускаем аудио и заменяем этот клас на класс active
        else{
            elem.classList.add("active");
            audioElm.play();
        }// при первом включении когда у кнопки нет ни какого класса происходит включение аудио и появляется класс active 
    }
</script>
<body>
<audio id="audio1">
<source src="file.mp3" type="video/mp3"  />
</audio>
<a name="ссылка1" class="playbutton" onclick="player_a(this)">Play</a>
</body>
</html>

@Master_Yi · 08.02.2015, 17:25 **[ТС]**

arcmag, Отличная идея использовать дополнительный класс. Добавил 3 строчки из вашего кода и все заработало! Спасибо!

Новые блоги и статьи Все статьи Все блоги /
Камера 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. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .	SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer 8Observer8 08.02.2026 Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .

@Master_Yi 13 / 10 / 3 Регистрация: 22.12.2013 Сообщений: 378
	08.02.2015, 16:45 [ТС]
	arcmag, Смотрите. Старый музыкальный файл в любом случае остановится ибо ссылка в проигрывателе сменится. Задача исправить код так что бы если ссылка не меняется(тоесть была нажата та же ссылка) срабатывала пауза. Сейчас если нажать на ссылку еще раз(ну что бы остановить) он начинает играть с самого начала. 0

@Master_Yi 13 / 10 / 3 Регистрация: 22.12.2013 Сообщений: 378
	08.02.2015, 17:25 [ТС]
	arcmag, Отличная идея использовать дополнительный класс. Добавил 3 строчки из вашего кода и все заработало! Спасибо! 0

Простейший замены состояния

Решение