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

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

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

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

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

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


Последняя дата редактирования : 06.03.2021 19:20
Название скрипта :Стоп и пуск в простом audio плеере через javascript
Скрипт № 63.2Ссылка на скачивание : Все скрипты на одной странице
//dwweb.ru/comments_1_5/include/img/hand_no_foto.png
no
no
Еще никто не прокомментировал! COMMENTS+   BBcode
аватар
🞨
Загрузить свой аватар
(max ширина, высота = 200px)

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

Счетчик в график :

Построение гравиков
Основа для графика : счетчик посещаемости.
Последние комментарии :
Марат :
13/04/2021 08:12
Во-первых пожалуйста!1). $new_array - был прописан оттого, что контент на сайте пишется на живых примерах. И часто…
подробнее.
Валерий :
13/04/2021 05:47
перебрал весь материал- во первых спасибоискал другое но понравился Ваш материалerror - или неточность 1. везде…
подробнее.
Марат :
08/04/2021 07:12
Сам афигеваю!
подробнее.
stream :
07/04/2021 05:56
Неплохо)
подробнее.
Марат :
24/03/2021 11:01
Да что вы!? За что обижаться то?Вы тот редкий человек, который смог написать! Вы молодец!Человек, же который не…
подробнее.