HTML5 Audio + JavaScript

@San007 · Регистрация: 17.06.2016

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

Добрый вечер форумчане. В JS полный ноль. Взял за исходник эту тему. Задача стоит в том, что бы сделать 10 аудио дорожек с возможностью переключения, путем нажатия на кнопку PLAY.

В исходнике на примере показан один файл аудио. Кое как добавил второй. А мне нужно 10. Если делать по моей схеме, код JS будет очень длинным. Помогите сократить его. И еще, при переключении трека, предыдущий не останавливается, играют сразу два. Спасибо.

PHP/HTML
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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<!DOCTYPE html>
<html>
    <head>
    <title>HTML5 Audio Player </title>    
    <!-- Uncomment the following meta tag if you have issues rendering this page on an intranet site. -->    
    <!--  <meta http-equiv="X-UA-Compatible" content="IE=9"/> -->  
    <script type="text/javascript">
 
        var currentFile = "";
        function playAudio() {
            // Check for audio element support.
            if (window.HTMLAudioElement) {
                try {
                    var oAudio = document.getElementById('myaudio');
                    var btn = document.getElementById('play'); 
                    var audioURL = document.getElementById('audiofile'); 
 
                    //Skip loading if current file hasn't changed.
                    if (audioURL.value !== currentFile) {
                        oAudio.src = audioURL.value;
                        currentFile = audioURL.value;                       
                    }
 
                    // Tests the paused attribute and set state. 
                    if (oAudio.paused) {
                        oAudio.play();
                        btn.textContent = "Pause";
                    }
                    else {
                        oAudio.pause();
                        btn.textContent = "Play";
                    }
                }
                catch (e) {
                    // Fail silently but show in F12 developer tools console
                     if(window.console && console.error("Error:" + e));
                }
            }
        }
        
        function playVudio() {
            // Check for audio element support.
            if (window.HTMLAudioElement) {
                try {
                    var qAudio = document.getElementById('waudio');
                    var btn = document.getElementById('plas'); 
                    var audioURL = document.getElementById('audioq'); 
 
                    //Skip loading if current file hasn't changed.
                    if (audioURL.value !== currentFile) {
                        qAudio.src = audioURL.value;
                        currentFile = audioURL.value;                       
                    }
 
                    // Tests the paused attribute and set state. 
                    if (qAudio.paused) {
                        qAudio.play();
                        btn.textContent = "Pause";
                    }
                    else {
                        qAudio.pause();
                        btn.textContent = "Play";
                    }
                }
                catch (e) {
                    // Fail silently but show in F12 developer tools console
                     if(window.console && console.error("Error:" + e));
                }
            }
        }
    </script>
    </head>
  
  <body>
    <p>
      <input type="text" id="audiofile" size="80" value="1.mp3" />
    </p>
    <audio id="myaudio">
      HTML5 audio not supported
    </audio>
    <button id="play" onclick="playAudio();">
      Play
    </button>
    
    <p>
      <input type="text" id="audioq" size="80" value="2.mp3" />
    </p>
    <audio id="waudio">
      HTML5 audio not supported
    </audio>
    <button id="plas" onclick="playVudio();">
      Play
    </button>
  </body>
 
</html>

@BANO · 17.06.2016, 17:14

San007, использовать массив с url файлов и переключать один Audio объект на новый url?

@San007 · 17.06.2016, 17:24 **[ТС]**

Да, именно так и хочу сделать

@BANO · 17.06.2016, 17:48

San007, а в чём проблема?
тогда берём, создаём объект Audio и туда запихиваем всё что душе угодно, и вызываем потом соответственно

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var aud= new Audio();
function playURL(url){
    stop();
    aud.src = url;
    play();
}
function play(){
    aud.play();
}
function pause(){
    aud.pause();
}
function stop(){
    pause();
    aud.currentTime =0;
}

всё, теперь вызываем её с нужным url и всё

@San007 · 18.06.2016, 14:29 **[ТС]**

А как создать этот объект Audio? И что значит запихиваем все?

Добавлено через 59 минут
вот что я хочу. но в этом плеере потоки радио не поддерживаются. Только mp3, aac и т.д.

@BANO · 18.06.2016, 15:08

San007, ох...
а зачем изобретать всё с нуля? если можно использовать sm2?

Сообщение от San007

потоки радио не поддерживаются.

вы радио хотите сделать?

ладно, покажу как надо с моим кодом работать

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var aud = new Audio();
function playURL(url){
    stop();
    aud.src = url;
    play();
}
function play(){
    aud.play();
}
function pause(){
    aud.pause();
}
function stop(){
    pause();
    aud.currentTime = 0;
}
 
// начинаем играть
play("some.mp3")
 
pause() // приостановили
 
stop() // вообще остановили, теперь будет играться с нуля

@San007 · 18.06.2016, 23:52 **[ТС]**

Да, хочу обычное радио сделать с несколькими потоками.
Спасибо за помощь, но я просто не понимаю как использовать ваш код.

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

@BANO · 18.06.2016, 23:56

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

@San007 · 19.06.2016, 00:05 **[ТС]**

Добавил ваш код к своему, но ничего не изменилось. Первый поток играет, даже при воспроизведении второго.

PHP/HTML
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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<!DOCTYPE html>
<html>
    <head>
    <title>HTML5 Audio Player </title>    
    <!-- Uncomment the following meta tag if you have issues rendering this page on an intranet site. -->    
    <!--  <meta http-equiv="X-UA-Compatible" content="IE=9"/> -->  
    <script type="text/javascript">
 
        var currentFile = "";
        function playAudio() {
            // Check for audio element support.
            if (window.HTMLAudioElement) {
                try {
                    var oAudio = document.getElementById('myaudio');
                    var btn = document.getElementById('play'); 
                    var audioURL = document.getElementById('audiofile'); 
 
                    //Skip loading if current file hasn't changed.
                    if (audioURL.value !== currentFile) {
                        oAudio.src = audioURL.value;
                        currentFile = audioURL.value;                       
                    }
 
                    // Tests the paused attribute and set state. 
                    if (oAudio.paused) {
                        oAudio.play();
                        btn.textContent = "Pause";
                    }
                    else {
                        oAudio.pause();
                        btn.textContent = "Play";
                    }
                }
                catch (e) {
                    // Fail silently but show in F12 developer tools console
                     if(window.console && console.error("Error:" + e));
                }
            }
        }
        
        function playVudio() {
            // Check for audio element support.
            if (window.HTMLAudioElement) {
                try {
                    var qAudio = document.getElementById('waudio');
                    var btn = document.getElementById('plas'); 
                    var audioURL = document.getElementById('audioq'); 
 
                    //Skip loading if current file hasn't changed.
                    if (audioURL.value !== currentFile) {
                        qAudio.src = audioURL.value;
                        currentFile = audioURL.value;                       
                    }
 
                    // Tests the paused attribute and set state. 
                    if (qAudio.paused) {
                        qAudio.play();
                        btn.textContent = "Pause";
                    }
                    else {
                        qAudio.pause();
                        btn.textContent = "Play";
                    }
                }
                catch (e) {
                    // Fail silently but show in F12 developer tools console
                     if(window.console && console.error("Error:" + e));
                }
            }
        }
        
        var aud= new Audio();
        function playURL(url){
            stop();
            aud.src = url;
            play();
        }
        function play(){
            aud.play();
        }
        function pause(){
            aud.pause();
}
        function stop(){
            pause();
            aud.currentTime =0;
        }
    </script>
    </head>
  
  <body>
    <p>
      <input type="text" id="audiofile" size="80" value="http://air2.radiorecord.ru:805/rr_320" />
    </p>
    <audio id="myaudio">
      HTML5 audio not supported
    </audio>
    <button id="play" onclick="playAudio();">
      Play
    </button>
    
    <p>
      <input type="text" id="audioq" size="80" value="http://air2.radiorecord.ru:805/mix_320" />
    </p>
    <audio id="waudio">
      HTML5 audio not supported
    </audio>
    <button id="plas" onclick="playVudio();">
      Play
    </button>
  </body>
 
</html>

@BANO · 19.06.2016, 00:18

ну во-первых у вас поток один и тот же
во-вторых, вот держите, но это может несработать из-за cors

PHP/HTML
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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!DOCTYPE html>
<html>
    <head>
    <title>HTML5 Audio Player </title>
    <script type="text/javascript">
      window.onload=function(){
       ;[].forEach.call(document.getElementsByClassName("play"),function (el){
         el.onclick=function(){
           play(document.getElementById(this.dataset.val).value)
         }
       })
        
        var aud = new Audio();
        function playURL(url){
            stop();
            aud.src = url;
            play();
        }
        function play(){
            aud.play();
        }
        function pause(){
            aud.pause();
        }
        function stop(){
            pause();
            aud.currentTime =0;
        }
        console.log(new Date+"")
      }
    </script>
    </head>
  
  <body>
    <p>
      <input type="text" id="audiofile" size="80" value="http://air2.radiorecord.ru:805/rr_320" />
    </p>
    <button class="play" data-val="audiofile">
      Play
    </button>
    
    <p>
      <input type="text" id="audioq" size="80" value="http://air2.radiorecord.ru:805/mix_320" />
    </p>
    <button class="play" data-val="audioq">
      Play
    </button>
  </body>
</html>

@San007 · 19.06.2016, 00:33 **[ТС]**

Потоки разные. rr_320 и mix_320. Не работает, кнопки play не активны. При нажатии ничего не происходит.

@BANO · 19.06.2016, 00:37

Сообщение от BANO

это может несработать из-за cors

я говорил

@San007 · 19.06.2016, 00:41 **[ТС]**

Спасибо в любом случае за отклик

Новые блоги и статьи Все статьи Все блоги /
Доступность команды формы по условию Maks 07.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: сделать доступной кнопку (команда формы "ЗавершитьСписание") при. . .	Уведомление о неверно выбранном значении справочника Maks 06.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "НарядПутевка", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если в документе выбран неверный склад. . .	Установка Qt Creator для C и C++: ставим среду, CMake и MinGW без фреймворка Qt 8Observer8 05.04.2026 Среду разработки Qt Creator можно установить без фреймворка Qt. Есть отдельный репозиторий для этой среды: https:/ / github. com/ qt-creator/ qt-creator, где можно скачать установщик, на вкладке Releases:. . .	AkelPad-скрипты, структуры, и немного лирики.. testuser2 05.04.2026 Такая программа, как AkelPad существует уже давно, и также давно существуют скрипты под нее. Тем не менее, прога живет, периодически что-то не спеша дополняется, улучшается. Что меня в первую очередь. . .
Отображение реквизитов в документе по условию и контроль их заполнения Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеСпецтехники", разработанного в конфигурации КА2. Данный документ берёт данные из другого нетипового документа. . .	Фото всей Земли с борта корабля Orion миссии Artemis II kumehtar 04.04.2026 Это первое подобное фото сделанное человеком за 50 лет. Снимок называют новым вариантом легендарной фотографии «The Blue Marble» 1972 года, сделанной с борта корабля «Аполлон-17». Новое фото. . .	Вывод диалогового окна перед закрытием, если документ не проведён Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать программный контроль на предмет проведения документа. . .	Программный контроль заполнения реквизитов табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: 1. Реализовать контроль заполнения реквизита. . .

@BANO Ренегат 1740 / 1085 / 386 Регистрация: 06.08.2014 Сообщений: 5,203 Записей в блоге: 1
	17.06.2016, 17:14
	San007, использовать массив с url файлов и переключать один Audio объект на новый url? 0

@San007 0 / 0 / 0 Регистрация: 17.06.2016 Сообщений: 8
	17.06.2016, 17:24 [ТС]
	Да, именно так и хочу сделать 0

@San007 0 / 0 / 0 Регистрация: 17.06.2016 Сообщений: 8
	18.06.2016, 14:29 [ТС]
	А как создать этот объект Audio? И что значит запихиваем все? Добавлено через 59 минут вот что я хочу. но в этом плеере потоки радио не поддерживаются. Только mp3, aac и т.д. 0

@San007 0 / 0 / 0 Регистрация: 17.06.2016 Сообщений: 8
	18.06.2016, 23:52 [ТС]
	Да, хочу обычное радио сделать с несколькими потоками. Спасибо за помощь, но я просто не понимаю как использовать ваш код. В JS коде, который я выложил в первом посте, потоки проигрываются как я и хотел, но при переключении потока аудио, первый не останавливается. Не пойму как задать такое событие, что бы при открытии нового потока аудио, играющий останавливался. 0

@BANO Ренегат 1740 / 1085 / 386 Регистрация: 06.08.2014 Сообщений: 5,203 Записей в блоге: 1
	18.06.2016, 23:56
	я уже дал код, который будет останавливать поток и играть новый, потому что там один единственный проигрыватель на эти ваши потоки 0

@San007 0 / 0 / 0 Регистрация: 17.06.2016 Сообщений: 8
	19.06.2016, 00:33 [ТС]
	Потоки разные. rr_320 и mix_320. Не работает, кнопки play не активны. При нажатии ничего не происходит. 0

@San007 0 / 0 / 0 Регистрация: 17.06.2016 Сообщений: 8
	19.06.2016, 00:41 [ТС]
	Спасибо в любом случае за отклик 0

HTML5 Audio + JavaScript

Решение