Создание АУДИО ПЛЕЕРА c нуля ⮞ HTML, SCSS, JAVASCRIPT

Зачастую приходится работать на сайтах с воспроизведением аудио/видео или создать полноценный плеер. В этом видео познакомимся с основными событиями и способами обработки аудио. Создадим классический функционал для аудио плеера, используя HTML, препроцессор SCSS, а также сам JavaScript.
00:00 - Как будет выглядеть аудио плеер
01:05 - Создание структуры проекта: HTML, SCSS, установка расширений для VS Code, добавление шрифтов
04:54 - Пишем HTML-структуру для плеера
19:21 - Рендерим аудио на странице с помощью JavaScript
38:38 - Логика для выбора трека
47:00 - Обновление времени и прогресса при воспроизведении трека
52:00 - Логика для кнопок воспроизведения и остановки трека
57:00 - Работа с переключением треков на предыдущий и следующий
01:03:17 - Добавление функционала после переключение и окончания трека
01:10:55 - Логика повторения трека
01:13:47 - Функционал изменения звука
01:16:17 - Перемешиваем треки кликом на кнопку
☃️ мой github: github.com/tomkovich
🐰 мой телеграм: t.me/tomkovich_frontend
🌚 мой инстаграм: / thmpsn_ya
😻 мой linkedin: / tomkovich
#javascript #практикаjavascript #javascripttutorial #frontend #html #programming #tutorial

[@Tomkovich]

репозиторий с готовым кодом и файлами: github.com/tomkovich/js/blob/master/spotimy

[@virnus1]

Крутые уроки. Вот бы ещё увидеть гайд по связки web pack и sass

[@gvitoss]

Ты молодец, хорошие уроки предоставляешь, не типичные и интересные)

[@Tomkovich]

Спасибочки

[@VINIPON]

Спасибо большое за помошь, всй не мог оформить АудиоПлеер

[@Xtemple135]

Спасибо огромное, не канал, а находка. Писать код под приятный голос красивой девушки, еще мне очень нравится твое произношение) А по разработке все очень понятно и доходчиво.🥰Подписка и лайк:)

[@ivansokol7827]

Шикарно! Спасибо))))))

[@haibova_irisha]

спасибо большое за видео. атмосфера, звук ,картинка приятные. надеюсь ,Вы и дальше будете развивать этот канал

[@kostinusPraym]

Ролик супер, продолжай в том же духе

[@alexserov7522]

Спасибо, очень нужно было как раз сегодня) Пришлось напильником чуть, под свои нужды, но все работает)

[@AmirOorzhak]

Лайк, подписка и колокольчик! Спасибо за годный контент!

[@user-km6wj7nw5o]

Контент 🔥🔥🔥

[@Tomkovich]

спасибо

[@FrontEndDeveloperAkmatov]

Прям очень годно!

[@excelente9842]

Ой как во время.. Как раз делаю музыкальный сайт с плей листом)

[@fanatqaleones6159]

Класс

[@user-jv3pm6zr2x]

Спасибо!!Все получилось,очень круто) Был затык с firstChild, не работало, помогло firstElementChild, вдруг у кого-то будет также.

[@user-ff1sd6wl1h]

Очень круто! Посмотрел на одном дыхании на скорости 3. Просто супер, думал будет React использоваться, а тут дата-атрибуты, что тоже круто) Правда не знаю, на сколько хорошей является практика вставки html-кода элемента в js-код в виде строки, но наверное другого выхода тут и нет

[@Tomkovich]

отчасти согласна, что лучше все создавать через методы JS, но в данном случае это ни на что не влияет

[@RefuelTheRocket]

Я правильно понимаю, что если фрейм юзать, там это может упростить?

[@blackwood8816]

👍🏼😂😂😂хороший видеоплеер

[@TheDaemonL]

только сегодня такое делал. прогресс бар тоже стоило сделать input type=range, тогда его можно было бы таскать для перемотки

[@dimasnytin]

🤩🤩🤩

[@user-ce9yr3my4g]

Ты красивая, продолжай дальше развивать свой канал. У тебя все получится

[@yanballas3055]

приветик! очень хочу по данному уроку реализовать свой пэт проект, но как-то зазорно тупо скатывать =) есть возможность как-нибудь получить данный дизайн в фигме \ другой приложухе, чтобы сделать редизайн и уже потом перейти к верстке и т.д.? а то гугл выдает только дизайны на app версии, а мне нужен именно web вариант. заранее спасиб.

[@temirovs]

Я написал индекс.хтмл до конца, и там свг, в особенности ругается на xlink:href="./assets/images/sprite.svg#pause". Хорошо, написал на href (тк xlink:href уже устарел), но все равно залупа какая-то. Я заметил то, что оно ругается на #pause (айдишки), пж хелпните уже 4 часа мучаюсь там эти кнопки свгшки вообще не отображаются, но там есть поле невидимое (вроде цсс и хтмл)

[@JavaScriptcher]

Хелло Евребади!!!

[@unicoxr5tj417]

Тимкович-топ)

[@Tomkovich]

осуждаю

[@unicoxr5tj417]

@@Tomkovich обожаю

[@RefuelTheRocket]

Кароч шляпа со спрайтом, когда вебпак юзаешь, то он ругается на спрайты, подрубил плагины, все равно не хочет, вдруг, если есть решение проблемы, было бы круто услышать)

[@xenitronje-4227]

А проект как называется, в репо ?

[@Tomkovich]

закинула - в прикрепленном комменте ссылка

[@diggerdog001]

данке шон

[@user-dz1dr6wq1u]

Добрый день,какой сложности данный проект?

[@Tomkovich]

для новичков :D

[@user-dz1dr6wq1u]

@@Tomkovich серйозно?

[@Tomkovich]

@@user-dz1dr6wq1u да, а что вызывает сложности?

[@alexanderpoker6655]

Уровень сложности: самые самые самые начальные азы js

[@seich3735]

Сколько лет вы учите программирование ?

[@Tomkovich]

да уже около 6 лет и до сих пор учусь

[@seich3735]

@@Tomkovich я вот тоже начал учить выучил треть html и css теперь перешёл на js не лёгкий язык как не крути

[@Xtemple135]

@@seich3735 2 месяц уже его изучаю)

[@user-ce9yr3my4g]

Volume не работает, также нельзя передвигать ползунок для перемотки треков

[@Tomkovich]

на счет volume - ищите ошибку у себя про перемотку треков я говорила в видео - вся логика похожа с логикой изменения звука, попробуйте сами это сделать, будет хорошей практикой :)

[@valerypobelenskiy1001]

Добрый день! проект точно не под ночичков ) что же вас всех успешных фронтов обьединяет??? загадка.... наверное технический бакгроунд... уже больше 2 х лет повторяю проекты пишу вникаю понимаю но вот сам врядли что то подобное сделаю Что же я упускаю???....

[@littlecat8445]

самостоятельную практику. Когда вы решаете свои задачи, сталкиваетесь с ошибками и находите им ответы

[@youth991]

Боже! Научитесь сами для начала верстать и писать код, а после уже кого-то обучайте