Всех друзей поздравляем с Новым годом! Всего вам самого наилучшего! Всех благ, здоровья а материальное приложится!
СКРИПТЫ althtmlcssphpjsblog

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

Поддержи проект!!! smile

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

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

  1. Запуск и остановка воспроизведения в теге audio
  2. Код запуска и остановки плеера через javascript
  1. Запуск и остановка воспроизведения в теге 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');

    }

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

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

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

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

  2. Код запуска и остановки плеера через 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>


Вас может еще заинтересовать список тем : #JS | #AUDIO_PLEER |
Последняя дата редактирования : 27.01.2021 21:40
//dwweb.ru/comments_1_5/include/img/hand_no_foto.png
no
no
Еще никто не прокомментировал! COMMENTS+   BBcode
аватар
🞨
Загрузить свой аватар
(max ширина, высота = 200px)

Подписаться + =

Последние комментарии :
Марат :
26/01/2021 12:28
Внимание! На странице описывается система комментирования ECOMMENT.SU.Здесь и далее, на всем сайте, стоит другая…
подробнее.
Марат :
26/01/2021 10:58
На сайте, комментирование моё собственное, которое не знаю, когда …
подробнее.
Вали :
26/01/2021 05:51
А вот эти комментарии тут - это же другие, не те о которых статья?Не…
подробнее.
Вали :
26/01/2021 05:44
Привет, классно!
подробнее.
Марат :
25/01/2021 10:08
Спасибо за добрые слова!Всегда пожалуйста!Приходите…
подробнее.