Блог

Главная - Вопросы по программированию - Функция остановки звука с помощью JS

Функция остановки звука с помощью JS

#javascript #html #audio

#javascript #HTML #Аудио

Вопрос:

Я пытался создать кнопку остановки для звуковой платы, которую я создавал, однако консоль продолжает говорить об этом Uncaught TypeError: audio.pause is not a function
at Stop (test2.html:205)
at HTMLButtonElement.onclick (test2.html:113) , хотя я определил audio . (Я вырезал много ненужных строк)

Я убедился, что у меня все написано правильно и в верблюжьем формате.

 <html>
<head>
</head>
<button onclick="Kommunizm()">Kommunizm</button>
<button onclick="Lenin()">Lenin</button>
<button onclick="OurGame()">Our Game</button>
<button onclick="USSR()">USSR</button>
<button onclick="Stop()">Stop (But do you really want to?)</button>
<button id="About">About</button>

<script>
var audio;
var music = [
"Soviet_Union_national_anthem_(instrumental),_1977.oga",
"Internationale_orchestral_arrangement.ogg",
"Korobeiniki.ogg",
"y2mate.com - ussr_ymca_parody_YV2WuSJ9GcA_320kbps.ogg"
];

//Now why is this disobeying my command?
function Stop() {
for (i=0;i<music.length;i  ){
audio = "audio"   i; 
audio.pause();
audio.currentTime = 0;
}
}

function Kommunizm(){
audio0 = new Audio(music[0]);
audio0.play();
}

function Lenin(){
audio1 = new Audio(music[1]);
audio1.play();
}

function OurGame(){
audio2 = new Audio(music[2]);
audio2.play();
}

function USSR(){
audio3 = new Audio(music[3]);
audio3.play();
}
</script>
</body>
</html>

Комментарии:

1. audio = "audio" i; не выбирает тег. Это просто создает строку, а у строк нет функции паузы.

2. На вашем месте я бы не пытался создавать так много динамических элементов, а добавил бы только один на страницу и обнаружил, что с его помощью document.getElementById затем обновите src и вызовите play для этого. Таким образом, вам нужно только найти один элемент и вызвать pause , чтобы остановить воспроизведение звука. В противном случае вам придется поддерживать массив ваших аудиообъектов и перебирать его, вызывая stop для всех из них. Другим подходом было бы добавление тега audio для каждого звука, а затем просто поиск их всех с помощью document.querySelectorAll('audio') и повторение цикла для вызова stop для всех элементов.

3. @AdamH Я должен был подумать об этом

Ответ №1:

Основываясь на моих комментариях, я собрал этот краткий пример общей звуковой платы, созданной на основе некоторого JSON. Это должно соответствовать всем вашим требованиям и облегчить вашу жизнь в будущем. Если вы не понимаете, как или почему что-то работает, дайте мне знать, и я немного расскажу об этом.

 const sounds = [
	{name: 'Kommunizm', location: 'Soviet_Union_national_anthem_(instrumental),_1977.oga'},
  {name: 'Lenin', location: 'Internationale_orchestral_arrangement.ogg'},
  {name: 'OurGame', location: 'Korobeiniki.ogg'},
  {name: 'USSR', location: 'y2mate.com - ussr_ymca_parody_YV2WuSJ9GcA_320kbps.ogg'}
];

const container = document.getElementById('button_container');
sounds.forEach(function(sound){
	let btn = document.createElement('button');
  btn.setAttribute('type', 'button')
  btn.setAttribute('data-source', sound.location);
  btn.setAttribute('data-name', sound.name);
  btn.innerHTML = sound.name;
  btn.addEventListener("click", playSound)
  container.appendChild(btn)
  
  let audio = document.createElement('audio');
  audio.setAttribute('id', sound.name);
  audio.setAttribute('autoplay', false);
  audio.setAttribute('src', sound.location);
  container.appendChild(audio);
});

function stop(){
  [].forEach.call(document.querySelectorAll('audio'), function(aud) {
    aud.stop();
  });
}

function playSound(){
	let player = document.getElementById(this.getAttribute('data-name'));
  if (player)
  	player.play();
}  
 <div id="button_container">

</div>
<button type="button" onclick="stop">
Stop All Sounds
</button>