Запуск остановка воспроизведения в теге audio через javascript

Остановить - запустить плеер по нажатию кнопки. Плеер у нас это будет тег audio.

Запуск остановка воспроизведения в теге audio через javascript

1. Запуск и остановка воспроизведения в теге audio
2. Код запуска и остановки плеера через javascript
3. Скачать

Запуск и остановка воспроизведения в теге audio

Чтобы запустить воспроизведение музыки в плеере/тег аудио, нам понадобится сам плдеер:

<audio controls="stop" id="player"><source src="https://dwweb.ru/путь до файла.mp3"></audio>

Далее мы должны определиться с какой клавиши будем запускать воспроизведение - стандартно - это кнопка пробел.

Нам нужно узнать номер кнопки. Идем на страницу определения онлайн номера кнопки.

Следующий пункт, если вы сейчас нажмете пробел, то сработает действие по умолчанию для этой кнопки. А именно перематывание! Поэтому это действие нам нужно отключить:

preventDefault()

Далее мне, здесь, на этой странице, как-то нужно отключить это самое действие по умолчанию. Сделаем специальную кнопку, по нажатию на которую отключим это самое действие по умолчанию!

Чтобы мы могли определять, в каком состоянии находится плеер, либо воспроизводит либо нет, то будем очищать атрибут controls, либо отправлять туда слово - "stop"

player.setAttribute('controls', '');

player.setAttribute('controls','stop');

В переменную "the_var" - будем получать это значение.

the_var = player.getAttribute('controls');

Создаем условие, по которому будем проверять и запускать наш плеер на воспроизведение:

if(the_var=='stop')
{
document.getElementById('player').play();
player.setAttribute('controls', '');
}


Остановка плеера по нажатию кнопки

К выше приведенному коду добавляем иначе и добавляем теперь "pause":

else

{

document.getElementById('player').pause();

player.setAttribute('controls', 'stop');

}

Вот так он у нас будет выглядеть плеер :

И кнопка отключения действие пробела по умолчанию:

Нажимаем по кнопке.

И далее по пробелу - смотрим на плеер.

Отключить действие клавиши пробел



Код запуска и остановки плеера через javascript

Соберем вместе весь код запуска и остановки плеера оп нажатию на кнопку пробел.

HTML :

<audio controls="stop" id="player"><source src="https://dwweb.ru/__a-data/mp3/digital_emotion_get_up.mp3"></audio>

CSS :

<style>#player {

width: 100%;

outline: unset;

}</style>

Javascript

<script>

document.onkeydown = function iziz(iz)

{

   if (iz.keyCode == '32')

   {

       iz.preventDefault();

       the_var = player.getAttribute('controls');

       if(the_var=='stop')

       {

       document.getElementById('player').play();

       player.setAttribute('controls', '');

       }

       else

       {

       document.getElementById('player').pause();

       player.setAttribute('controls', 'stop');

       }

   }

};

</script>