Javascript-форум - JavaScript API для тега audio

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - JavaScript API для тега audio (https://javascript.ru/forum/misc/63648-javascript-api-dlya-tega-audio.html)

JavaScript API для тега audio

Помогите найти ошибку

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta charset="utf-8" />
    <title>App3</title>
</head>
<body>
 <script>
		var audio = new Audio("http://air2.radiorecord.ru:805/rr_320");
		var play = document.getElementById('play');
			play.addEventListener('click', function(){
				audio.play();
				}, false);
</script>
	<div>
		<input id="play" type="button" value="Play" />
</body>
</html>

При нажатии PLAY аудио поток не воспроизводится :(

San007,
страница загружается и что будет у вас в строке 17 строке 11 ещё неизвестно. поменять скрипт и кнопку местами.

San007,
кое-что болтается на d называется!!!

Первым делом закрой тег див. Далее, либо перемести скрипт вниз перед закрывающимся тегом body, либо используй функцию обратного вызова.

<body>
<script>

window.onload = init;

function init() {
  var audio = new Audio("http://air2.radiorecord.ru:805/rr_320");

  var play = document.getElementById('play');
    play.addEventListener('click', function(){
      audio.play();
      }, false);
}

</script>
	<div>
		<input id="play" type="button" value="Play" />
	</div>

</body>

Нашел код получше:

<!DOCTYPE html>
<html>
<head>
    <title>Audio</title>
</head>
<body>
    <div>
        <audio id="audio1" style="width:25%" controls>Canvas not supported</audio>
    </div>
    <div>
        <input type="text" id="audioFile" value="http://air2.radiorecord.ru:805/rr_320" size="60" />

    </div>
    <button id="playbutton" onclick="togglePlay();">Play</button>
    <div id="rate"></div>

    <script type="text/javascript">
       // Create a couple of global variables to use.
       var audioElm = document.getElementById("audio1"); // Audio element
       var ratedisplay = document.getElementById("rate"); // Rate display area

       // Hook the ratechange event and display the current playbackRate after each change
       audioElm.addEventListener("ratechange", function () {
         ratedisplay.innerHTML = "Rate: " + audioElm.playbackRate;
       }, false);

       //  Alternates between play and pause based on the value of the paused property
       function togglePlay() {
         if (document.getElementById("audio1")) {

           if (audioElm.paused == true) {
             playAudio(audioElm);    //  if player is paused, then play the file
           } else {
             pauseAudio(audioElm);   //  if player is playing, then pause
           }
         }
       }

       function playAudio(audioElm) {
         document.getElementById("playbutton").innerHTML = "Pause"; // Set button text == Pause
         // Get file from text box and assign it to the source of the audio element
         audioElm.src = document.getElementById('audioFile').value;
         audioElm.play();
       }

       function pauseAudio(audioElm) {
         document.getElementById("playbutton").innerHTML = "play"; // Set button text == Play
         audioElm.pause();
       }

    </script>


</body>
</html>

Вопрос: как добавить второй аудио поток? Делать такой же JS с другими переменными? Потоки хочу разместить на одной HTML странице.