DWWEB.RU
СКРИПТЫ

Стоп, пуск в плеере html через javascript

Как остановить и запустить воспроизведение на плеере с помочью клавиатуры, у нас есть плеер html.

На котором мы и будем тренироваться, чтобы заработал пуск и стоп…

Не будем все до последней крошки разжевывать…

Нам понадобится… как минимум

1. getElementById
2. keycode
3. getAttribute
4. setAttribute
Как вы заноете, чтобы обращаться к тегу, самое простое и наглядное это идентификатор, например назовем его:
id="player"

И у нас еще в теге audio есть атрибут controls, по умолчанию поставим туда stop

controls="stop"

Src – наверное понятно – что это путь… до файла мп3

Теперь соберем это все вместе…

Код:

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

Результат:

Теперь скрипт...

Логика такая – код кнопки пробела 32 – будем проверять по нажатию, пробела, что находится в атрибуте при первом нажатии срабатывает пуск play() и одновременно отправляется в атрибут пустота, второй раз нажимаем – это остановить… срабатывать pause() и отправляется в controls stop .

Довольно простой код…

Ну и далее вам остаётся только и всего... нажать на пробел... и потренироваться, как на нашем плеере работает воспроизведение и пауза на плеере html

<script>

document.onkeydown = function checkKeycode(event)

{

    var keycode;

    if(!event) var event = window.event;

    if (event.keyCode) keycode = event.keyCode; // для IE

    else if(event.which) keycode = event.which; // для всех браузеров

    if( keycode=='32')

    {

      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>

Не забудь !
Название скрипта :Стоп и пуск в простом audio плеере через javascript
Скрипт № 52.2
Скачать - архив
Все скрипты на одной странице
Оставить комментарийCOMMENTS+
Сообщений пока нет - Вы можете стать первым
BBcode
нажмите, чтобы загрузить аватар
Загрузить свой аватар(max ширина, высота = 100px) ( как это работает)

Закрыть
+ =
Подписаться
Теги:
Стоп, пуск в плеере html через javascript

НАШИ ПРОЕКТЫ : Проекты находятся в разной степени готовности (просто их столько, что времени не хватает…) Все статьи авторские, при копироавании активная ссылка обязательна DwWeb.ru! © 2015 - 2019