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

Плеер в теге audio

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

Что такое тег audio, как использовать тег audio, как вставить ссылку в тег audio. Вообще, тег audio - это самый простой плеер, вот так он будет выглядеть(в зависимости от браузера вид может быть разным):

О теге audio - плеер

  1. Что такое тег audio
  2. Убираем обводку у тега audio
  3. Включение выключение тега audio пробелом
  1. Что такое тег audio

    Тег audio, это плеер, который вы видите ниже(это живой код плеера, можно нажать пуск) :

    Синтаксис на выше приведенном теге audio:

    <audio controls style="width:100%"><source src="https://dwweb.ru/путь до файла.mp3"></audio>

    Отображение тега audio в разных браузерах :

    В трех трех браузерах
    Отображение тега audio в разных браузерах :
    , тег audio будет выглядеть одинаково:
    Отображение тега audio в разных браузерах :

    Что у нас есть в панель управлением тегом audio или плеером?

    Слева направо:

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

    Временные метки, время прошедшее, время оставшиеся.

    Шкала отображения процесса audio.

    Кнопка регулировки громкости.

    И три вертикальные кнопки - кнопки скачать терк.

    Что у нас есть в панель управлением тегом audio  или плеером?

  2. Убираем обводку у тега audio

    Если мы нажмем воспроизведение audio в плеере, то при нажатии образуется линия обводки - она не очень красивая - поэтому уберем её!

    Убираем обводку у тега audio

    Добавим класс нашему audio, и туда же переместим ширину, на весь экран, чтобы было компактнее:

    style :

    #player{

    width: 100%;

    outline: unset;

    }

    Html :

    <audio controls class ="audio"><source src="https://dwweb.ru/путь/digital_emotion_get_up.mp3"></audio>

    Результат:

  3. Включение выключение тега audio пробелом

    Включать выключать вы можете с помощью кнопки/клавиши пробела, но проблема в том, чтобы первый раз включить - нужно нажать мышкой и только тогда плеер audio можно запускать останавливать с помощью клавиши пробела, а можно без этого!?

    Можно!

    Легко!

    Дочитали до этой строчки, нажимаем пробел.

    Результат должен быть - прокрутка страницы вниз! Теперь, давайте выключим по кнопке действие пробела по умолчанию

    Нажмите ниже идущую кнопку :

    И далее опять пробел и смотрите на выше приведенный тег audio

    Это сделано для наглядности, как это должно работать. Кнопка, конечно вам не нужна, а весь код, который участвовал далее:

    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 | #HTML_TAGS |
Последняя дата редактирования : 2020-11-20 20:36
//dwweb.ru/comments_1_5/include/img/hand_no_foto.png
no
no
Еще никто не прокомментировал! COMMENTS+   BBcode
аватар
🞨
Загрузить свой аватар
(max ширина, высота = 200px)

Подписаться + =
Теги:
тег audio html тег audio тег audio html атрибуты тега audio не работает тег audio каковы функции тега audio тег audio js

Последние комментарии :
Марат :
03/12/2020 08:47
Давно пользуюсь данным скриптом, который написал еще при царе горохе!За десять лет изменилось то, что и при…
подробнее.
Ольга Попова :
02/12/2020 11:42
Я уж было обрадовалась, а у меня не…
подробнее.
Марат :
23/11/2020 07:38
Приходите ещё!
подробнее.
Лило :
23/11/2020 06:34
Благодарю, удобно
подробнее.
Марат :
15/11/2020 01:57
Здесь отвечал...1) Есть вот комментарии от вконтактае, очень простые 2)Такое же есть от мордокниги, 3) смотрите…
подробнее.