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 **[ТС]**

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

Новые блоги и статьи Все статьи Все блоги /
http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .	Первый деплой lagorue 16.01.2026 Не спеша развернул своё 1ое приложение в kubernetes. А дальше мне интересно создать 1фронтэнд приложения и 2 бэкэнд приложения развернуть 2 деплоя в кубере получится 2 сервиса и что-бы они. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь постоянного тока с R, L, C, k(ключ), U, E, J. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа, решает её и находит: токи, напряжения и их 1 и 2 производные при t = 0;. . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .
Изучаю kubernetes lagorue 13.01.2026 А пригодятся-ли мне знания kubernetes в России?	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .

@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

Решение