Можно ли через js выключить audio?

@prudkiy · Регистрация: 21.07.2013

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

Доброй всем ночи. Можно ли через javascript остановить audio (было создано через html5) которое играет.
То что pause() эт я знаю если обращаться к конкретному элементу. Но если выключать не зная что играет и как оно называется, просто выключить audio как бы его не звали.

Добавлено через 6 минут
может я не в ту сторноу пошел, обясню зачем мне это нужно.
есть у меня 2 аудио файла

HTML5
1
2
3
4
5
6
7
8
<audio id="audio_1">
                                            <source src="audio/liaudio1.ogg" type="audio/ogg" />
                                            <source src="audio/liaudio1.mp3" type="audio/mp3" />
                </audio>
                <audio id="audio_2">
                                            <source src="audio/audio2.ogg" type="audio/ogg" />
                                            <source src="audio/audio2.mp3" type="audio/mp3" />
                </audio>

работают они от кнопок

HTML5
1
2
3
4
5
<span onclick="document.getElementById('audio_1').play()">
<span onclick="document.getElementById('audio_1').pause()">
<br/>
<span onclick="document.getElementById('audio_2).play()">
<span onclick="document.getElementById('audio_2').pause()">

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

@Thisman · 29.08.2014, 05:43

prudkiy, первое, что приходит в голову, это хранить текущее аудио в переменной, и работать с ней ,то бишь :

JavaScript
1
2
3
4
5
6
7
8
var currentAudio;
 
function playAudio(audio) {
    currentAudio.stop() // останавливаем текущее воспроизведение
 
    currentAudio = audio; // обновляем текущее аудио
    currentAudio.play() // начинаем проигрывать новое аудио
}

использовать так :

HTML5
1
<span onclick="playAudio(document.getElementById('audio_1'))"></span>

Добавлено через 3 минуты
Если возможна такая вероятность, что "умный" пользователь может нажать на кнопку play два раза, можно проверять: если пытаются воспроизвести аудио, которое уже играет, то ничего не делать :

JavaScript
1
2
/* в самом начале функции */
if(currentAudio == audio) return; //должно сработать вроде бы

Как еще вариант, делать кнопку play текущего аудио неактивной

@Опан · 29.08.2014, 11:57

Просто прописать во вторую кнопку два события:

JavaScript
1
onclick="document.getElementById('audio_2').play(); document.getElementById('audio_1').pause();"

а в первую - наоборот:

JavaScript
1
onclick="document.getElementById('audio_1').play(); document.getElementById('audio_2').pause();"

@Thisman · 29.08.2014, 12:24

Опан, а если записей будет 5? 10? 100? Явно не оптимальный метод

@Опан · 29.08.2014, 13:34

Тогда создаём функцию, останавливающую все треки:

JavaScript
1
2
3
4
5
6
7
8
<script>
var a=document.getElementsByTagName("audio");
function all_pause(){
    for(i=0;i<a.length;i++){
        a[i].pause();
    }
}
</script>

И вписываем её в кнопки перед play().

Добавлено через 48 минут
Есть ещё вариант, чтобы тег аудио на странице был только один, а кнопками задавать новый SRC и по-новой запускть.

@prudkiy · 29.08.2014, 15:09 **[ТС]**

понравилось вот это

var currentAudio;

function playAudio(audio) {
currentAudio.stop() // останавливаем текущее воспроизведение

currentAudio = audio; // обновляем текущее аудио
currentAudio.play() // начинаем проигрывать новое аудио
}

только вот вроде написал все так - не работает совсем. Давай для проверки писать так -

HTML5
1
<span onclick="playAudio('audio_1')">Прослушать аудио отзыв</span>

JavaScript
1
2
3
4
5
script>
function playAudio(audio) {
getElementById(audio).play() // начинаем проигрывать новое аудио
}
        </script>

не запускается, может его нужно как то по другому, хотя не пойму почему не запускается

@Thisman · 29.08.2014, 15:38

prudkiy, вот проверил -рабочий скрипт. Добавил туда проверку на аудио, и если мы включаем только в первый раз

JavaScript
1
2
3
4
5
6
7
8
9
10
11
    var currentAudio = null;
 
    function playAudio(audio) {
        /* в самом начале функции */
        if(currentAudio == audio) return;
 
        if(currentAudio) currentAudio.pause();// останавливаем текущее воспроизведение, если оно есть
 
        currentAudio = audio; // обновляем текущее аудио
        currentAudio.play(); // начинаем проигрывать новое аудио
    }

Добавлено через 1 минуту
не запускалось, потому что у audio есть метод PAUSE, а не STOP

@Опан · 29.08.2014, 15:58

А теперь нажмите play какой-то одной песни, после этого - стоп, и потом опять play

@Thisman · 29.08.2014, 16:02

Опан, так, у него же нет атрибута control в теге. А значит он используют свои кнопки управления.
Поэтому и функция паузы будет другой

@Опан · 29.08.2014, 16:04

Я о кнопках и говорю.

@Thisman · 29.08.2014, 16:06

Таким может быть вид функци остановки :

JavaScript
1
2
3
4
    function stopAudio () {
        currentAudio.pause(); // останавливаем, можно еще полностью обнулить время через currentTime;
        currentAudio = null; // сбрасываем
    }

Кнопка паузы активна будет только у мелодии, которая проигрывается. Остальные скрывать.

@Опан · 29.08.2014, 16:18

Да, так лучше.

@prudkiy · 30.08.2014, 00:39 **[ТС]**

спасибо всем за помощь. Вот из вашего склепал - работает как надо )

HTML5
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
31
32
33
<!DOCTYPE HTML>
<html>
<head>
    <title>audio</title>
    <script>
    var currentAudio = null;
    function playAudio(audio) {
        if(currentAudio) currentAudio.pause();
        currentAudio = audio;
        currentAudio.play(); 
    }
    function stopAudio(audio) {
        currentAudio.pause();
    }
        </script> 
</head>
 
<body>
                <audio id="audio_1">
                                            <source src="audio/liaudio1.ogg" type="audio/ogg" />
                                            <source src="audio/liaudio1.mp3" type="audio/mp3" />
                </audio>
                <br />
                <audio id="audio_2">
                                            <source src="audio/audio2.ogg" type="audio/ogg" />
                                            <source src="audio/audio2.mp3" type="audio/mp3" />
                </audio>
 <button onclick="playAudio(document.getElementById('audio_1'))">Прослушать аудио1 отзыв</button>
 <button onclick="stopAudio(document.getElementById('audio_1'))">Остановить аудио1 отзыв</button>
 <button onclick="playAudio(document.getElementById('audio_2'))">Прослушать аудио2 отзыв</button>
 <button onclick="stopAudio(document.getElementById('audio_2'))">Остановить аудио2 отзыв</button>
</body>
</html>

Новые блоги и статьи Все статьи Все блоги /
Контроль заполнения и очистка дат в зависимости от значения перечислений Maks 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .	Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .	Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .	Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .
модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .	Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .	Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20% kYBz3eJf3jQ

@Thisman Модератор 771 / 352 / 142 Регистрация: 17.07.2013 Сообщений: 992
	29.08.2014, 12:24
	Опан, а если записей будет 5? 10? 100? Явно не оптимальный метод 0

@Опан Юзер с абсолютным слухом 709 / 489 / 195 Регистрация: 17.12.2010 Сообщений: 1,428
	29.08.2014, 15:58
	А теперь нажмите play какой-то одной песни, после этого - стоп, и потом опять play 0

@Thisman Модератор 771 / 352 / 142 Регистрация: 17.07.2013 Сообщений: 992
	29.08.2014, 16:02
	Опан, так, у него же нет атрибута control в теге. А значит он используют свои кнопки управления. Поэтому и функция паузы будет другой 0

@Опан Юзер с абсолютным слухом 709 / 489 / 195 Регистрация: 17.12.2010 Сообщений: 1,428
	29.08.2014, 16:04
	Я о кнопках и говорю. 0

@Опан Юзер с абсолютным слухом 709 / 489 / 195 Регистрация: 17.12.2010 Сообщений: 1,428
	29.08.2014, 16:18
	Да, так лучше. 0