Делаем аудиоплеер HTML / SCSS / JS.

🏆 Поднять мотивацию и получить плюшки(сборка, исходники, чат со мной):
🔹 Patreon: / roman_timoshchuk
🔹 Buy me a coffee: www.buymeacoffee.com/tymoshchuk
🔹 Crypto:
👉 USDT(ERC20): 0xA4008910De17DB20c7505425316fF72d4C5Eed96
👉 USDT(BEP20): 0x4350c4E1C0bB35634C7fDE1cFB278BE0606E3822
👉 Binance Pay: 432902886
⏱️ Тайм-коды: ⏱️
00:00 Обзор приложения
00:45 Обзор стартового шаблона
01:24 Разбираем макет
02:20 Делаем HTML верстку
04:30 Пишем стили на препроцессоре SCSS
09:15 Переходим к JS, получаем DOM элементы
12:56 Загрузка песни
19:29 Play, Pause функции
28:22 Функция "следующая песня"
31:10 Функция "предыдущая песня"
32:45 Реализуем прогрессбар и промотку песни
42:50 Клянчу фидбек о моих видео
📨 Сотрудничество ► [e-mail]
📨 Business inquiries ► [e-mail]

[@lets_try_js]

Ребят, накидайте фидбека )

[@yunkidze]

Спасибо большое, а как сделать отключение звука на айфоне, при отключения звука аппаратной кнопкой?)

[@user-lj3fk5to2g]

Спасибо! Все понятно с первого раза!

[@lets_try_js]

@@user-lj3fk5to2g рад стараться)

[@wizartable]

За урок спасибо, но представь что ты в самом начале пути обучения(ты бомж-студент из общаги, который ест хлеб с мазиком и огурцами, ходит везде пешком) У тебя нет денег на патреон. Представил? Ок, выложи ссылку на макет. Графику с аудио на гугл диск для таких людей тоже выложи плз, если не сложно. А то хочется учиться и повторить урок, но...

[@lets_try_js]

@@wizartable у меня не осталось исходников

[@cult2839]

Вот это контент! Супер спасибо, получилось в своем проектике по аналогии реализовать работу плеера, очень хорошее объяснение! И еще было бы интересно посмотреть на добавление возможности регулировать громкость.

[@user-ys5kt7fr4y]

это лучшее, что я нашел по запросу "как сделать аудиоплеер". порезал на кусочки, пережевал все 100 раз, в рот положил. респект за твой труд

[@lets_try_js]

спасибо)

[@jik856]

Сложно было найти подобный контент на русском, спасибо за старания, ты молодец!

[@lets_try_js]

благодарю)

[@jik856]

@@lets_try_js единственная проблема в том, что у меня duration возвращает почему-то Infinity, не совсем понимаю почему...

[@user-ul9ls7ox1t]

Благодарю за ваш труд. Очень нравится как объясняете. На таких вот практических задачах, и учишься.

[@lets_try_js]

Благодарю )

[@asmix7328]

Огонь! Спасибо за урок! Все понятно и доступно для начинающего) Попробовал повторить...всё получилось)

[@lets_try_js]

рад помочь )

[@user-dz6jr3vu9x]

Если удалось повторить. Значит наверное и понять. Можете тогда подсказать как после объявления массива через переменную songs далее используется song?

[@user-eg1qk2zi4v]

Спасибо тебе огромное) Доносишь информацию максимально просто и понятно

[@lets_try_js]

Благодарю ))

[@markchumakov2169]

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

[@skdev2062]

Большое спасибо за урок! Желаю успехов! :)

[@user-yj3lf2nl6w]

Все отлично! первое нормальное видео с объяснением кода за сегодня) Продолжай в том же духе

[@lets_try_js]

Спасибо )

[@user-yj3lf2nl6w]

@@lets_try_js единственное у меня не работает ${song} пришлось сделать + song +'mp3'

[@lets_try_js]

@@user-yj3lf2nl6w главное что в итоге все получилось)

[@sheix8]

Спасибо за видео! По поводу подачи материала все хорошо. Отличный микрофон, приятный голос, культурная речь. К сожалению, не могу оценить насколько всё хорошо объясняется, так как совсем новичок, но подача очень хорошая.

[@lets_try_js]

Спасибо! Ну, все мы когда-то были новичками. Успехов в обучении! )

[@markosvager1063]

Большое спасибо за это замечательное видео. Вы объяснили нам много хороших вещей - мне понравилось. Все найкраще.

[@ingazhelnova4798]

Отличный урок! Большое спасибо!!!

[@GEO-le5ft]

Урок зашел. Продолжай в том же ключе ))

[@m1000melochey]

Спасибо за урок. Я только начала свой путь в IT, много не знаю. Очень долго искала подобный урок. Все отлично разжевано. Действительно еще сюда добавить кнопку звука и цены бы не было.

[@just__did__it]

Офигенный урок, спасибо

[@user-ts8ek3oz8h]

Продолжай так же бро, видосы просто топовые!!!

[@tabrisel]

Спасибо большое за подробный урок!) Еще и с тайм-кодами. Автор умничка :)

[@lets_try_js]

благодарю)

[@user-hq3em8iy9c]

Большое спасибо. Смотрела на перемотке. Хочется все быстрее))) видос классный и полезный. Жаль не сразу попался мне. Успехов!

[@lets_try_js]

спасибо)

[@dvdonov]

Спасибо за видео! Очень доступно объясняете

[@user-yf5ip7td2y]

Круто , искал такой контент . Спасибо за видео!

[@lets_try_js]

спасибо) раз помочь )

[@user-sv4zd2hf8r]

это очень крутой урок, спасибо ОГРОМНОЕ!

[@arsttws2667]

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

[@user-pt2uz5st7i]

очень круто и легко объяснил, спасибо

[@apsolution4722]

Круто, контент на высоте) Спасибо

[@lets_try_js]

благодарю)

[@No..Name.]

О, круто, сейчас попробую сделать плеер по видео

[@user-rx1ih7nv7r]

Круто 🔥🔥🔥, обязательно попробую сделать, спасибо большое!

[@lets_try_js]

успехов тебе) у тебя все получится)

[@aliakseipliutsinski2890]

Дай бог вам здоровья за такой крутой ролик ❤

[@lets_try_js]

благодарю)

[@user-xq9zt4os5h]

Большое спасибо за отличную работу!!! Мне было очень полезно твое видео! Было бы круто, если бы было открыто параллельно два экрана сразу(html документ и js), так проще ориентироваться к чему обращаешься в процессе )))

[@lets_try_js]

я никак не привыкну к таком формату, когда два окна ))

[@user-cb7vw5jr1f]

Спасибо за видео, очень все понятно и круто!

[@lets_try_js]

спасибо за отзыв )

[@user-ze6um7qg4c]

Спасибо огромное, Ваша работа конечно шикарно выглядит, вроде визуал обычный, но макет круто сделано и сама реалищация очень доступная, у меня было полегче требование, вы очень помогли, спасибо!!!

[@lets_try_js]

рад оказаться полезным)

[@sony1939]

Cпасибо! супер понятно работает!

[@user-ts8ek3oz8h]

Ты лучший! Спасибо большое мужик!!!

[@jekagabrusevich6831]

Спасибо, крутой урок

[@user-kd4yc5jl9w]

сделано, хорошо. мне как новичку было приятно слушать. без воды, по пунктам, чётко и понятно, каждый шаг осмыслен и объяснён. не нужно было останавливать видео чтобы понять что конкретно ты сделал. продолжай в том же духе. единственное что я не понял немного как ты работаешь с классами внутри css но это скорее отсутствие части фундаментальных знаний, чем твоя недоработка. буду рад новым видео!

[@lets_try_js]

Спасибо за такой расширенный фидбек)

[@user-kd4yc5jl9w]

@@lets_try_js а есть у вас репозиторий с этим уроком? есть вопросы, хотел бы сравнить код UPD. пересмотрел ещё раз и понял, что у нас с вами некоторые нюансы различаются касательно определения классов в css. но не страшно за 2 часа нашёл как вырулить) ещё раз спасибо, всё получилось

[@lets_try_js]

@@user-kd4yc5jl9w есть архив напиши мне в личку, в инсте (ссылка в шапке канала), скину )

[@user-dz6jr3vu9x]

Да действительно хитро вложенные классы получаются... Как это работает?

[@user-tn5ez4ei3m]

Спасибо, дружище, очень понятно и доступно!!! Для начинающих этот видос просто бомба!!!!

[@lets_try_js]

благодарю)

[@user-bk8yh8be3c]

Все очень доходчиво!!! Супер просто!!!!

[@lets_try_js]

рад помочь)

[@user-rq4qh8uv2k]

Спасибо огромное, очень помогло в работе

[@lets_try_js]

рад помочь)

[@user-vj3gp1nm8x]

спасибо! отличная работа = спасибо!

[@youtubestar3495]

Искал, нашел!!! Спасибо за тутор!!!

[@lets_try_js]

рад помочь)

[@ariionariion7191]

Ты очень хорош. Долго искал как сделать свой плеер у меня есть макет каторый я хотел сверстать там кнш все подругому но ты с кайфом обянил и я сделал этот макет теперь он чуть денамичней и деше прияно все четко все красиво продолжай

[@WinchesterD]

Спасибо за туториал, оказалось то что мне нужно. Жаль только не реализовывал таймер показывающий время песни в минутах и секундах а также изменение громкости при помощи ползунка.

[@m1akarov442]

О вас еще мало знают, но как узнают ..... Вы уже не будете успевать нам отвечать =) Этого мы вам и желаем ! Контент лучше многих "блоггеров" программистов . Вы проффесионал !

[@liveforever1424]

Жеско мужик!

[@user-nv7su8re9y]

Я тебя люблю, ты мне жизнь спас❤❤❤❤❤

[@baidassuiunbaev7762]

ЛУЧШИЙ!

[@user-iy3mm1jz8r]

Все круто

[@artemkamyshenkov3492]

Спасибо большое)

[@lets_try_js]

рад помочь)

[@user-yf3yt6hp3e]

Спасибо тебе за видео, я добавил кнопку полноэкранного режима, мут, перемотка на 10 сек вперед и назад, при нажатии на пробел останавливать и воспроихводить видео, а чтобы сделать кнопку с настройков качества видео, надо библиотеку специальную?

[@user-em2zl1lp3z]

Спасибо за контент 👍 давай ещё вёрстку со своей супер крутой сборкой

[@lets_try_js]

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

[@read_and_listen]

@@lets_try_js первый вариант)

[@user-em2zl1lp3z]

@@lets_try_js конечно сложного 🤘🏻

[@user-kg6fz5tz2b]

Спасибо! Только недавно случайно увидел канал! Хорошо, что подписался! Лайк, колокол нажал!)

[@lets_try_js]

воу))) спасибо тебе !))

[@user-hd1mo2uo1p]

Спасибо

[@o-w1871]

лайк, подписка, комент! Двигаем контент

[@thestrelchik]

ты босс :*

[@user-px6ui9wk1f]

Спасибо больше за контент! Искал видео на примере которого смогу поработать с аудио файлами. Решил улучшить немного плеер добавив визуализации звука прямо над прогресс-баром: const canvas = document.querySelector('#canvas1'); const ctx = canvas.getContext('2d'); let audioSource, analyser; function preporation() { const audioContext = new AudioContext(); if (!audioSource) { // Проверка на присутствие источника аудио analyser = audioContext.createAnalyser(); audioSource = audioContext.createMediaElementSource(audio); audioSource.connect(analyser); analyser.connect(audioContext.destination); } analyser.fftSize = 128; // Настройка количества "столбиков" в анимации const bufferLength = analyser.frequencyBinCount; const dataArray = new Uint8Array(bufferLength); const barWidth = canvas.width/bufferLength; let barHeight; let x; function animate() { x = 0; ctx.clearRect(0, 0, canvas.width, canvas.height); analyser.getByteFrequencyData(dataArray); drawVisualiser(bufferLength, x, barWidth, barHeight, dataArray); requestAnimationFrame(animate); } animate(); } function drawVisualiser(bufferLength, x, barWidth, barHeight, dataArray) { for (let i = 0; i < bufferLength; i++) { barHeight = dataArray[i] / 2.5; // Настройка высоты анимации const red = i * barHeight/10; const green = i * 4; const blue = barHeight/6; ctx.fillStyle = 'rgb(' + red + ',' + green + ',' + blue + ')'; // Настройка цвета ctx.fillRect(x, canvas.height - barHeight, barWidth, barHeight); x += barWidth; } } За основу взято иностранное видео. Кому интересно вот ссылка: kzbin.info/www/bejne/jIm6p5mootWUpqs&ab_channel=Frankslaboratory Чтобы все заработало, необходимо добавить сам канвас в html разметку, как-то так: Удачи всем кто постигает JS в эти трудные времена и еще раз спасибо за потрясающие видео!

[@lets_try_js]

Вау, круто 👍 Если сам ютуб не удалит этот коммент(не любит ссылок в комментах) то я его оставлю, думаю людям будет весьма полезно)

[@user-kh4vh9dr1i]

привет спасибо большое выручил

[@user-kh4vh9dr1i]

а как добавить регулятор громкости ?

[@Kain4ra]

Отличное видео. Подскажите, пожалуйста, делаю всё как на видео, но прогресс двигается то ровно, то зависает и потом перескакивает. С чем это может быть связано?

[@olehPagulych]

Дякую)

[@lets_try_js]

рад помочь)

[@David-gm7qz]

здравствуйте, хороший урок , хотел спросить какая программа использовалась для создания макета?

[@lets_try_js]

здравствуйте) я работаю в Figma для отрисовки дизайна)

[@156Winter]

Спасибо за урок, сначало у меня не получалось, убил 2 дня чтоб понять и только на второй понял что я ставил ' а должно было быть `.

[@vadimniziev5489]

Привет! Подскажи пожалуйста, какой у тебя шрифт используется ? очень приятен для глаз, хочу себе тоже такой сделать)) Ролик топ)

[@lets_try_js]

шрифт в редакторе. ? если да, то он называется JetBrains Mono

[@deanwichester6412]

Шикарный урок.,когда трек заканчивается сделал так ,но вроде тоже работает function updateProgress(e) { let currentTime = audio.currentTime const duration = audio.duration const start_progress = currentTime / (duration / 100) progress.style.width =`${start_progress}%` if (start_progress == 100) { nextSong() } }

[@user-nm5my5tk1r]

Что за программу для написания кода используешь?

[@sandstorm7786]

Есть видео твоих настроек и плагинов VS Code ? мне понравилась анимация мерцающей линии и шрифт

[@lets_try_js]

есть видео на эту тему на канале

[@ikatsulaia7468]

спасибо за отличную работу!!! контент на высоте, все понятно и круто!

[@user-dz6jr3vu9x]

Не улавливаю откуда взялось имя song, если массив присвоен переменной songs?

[@user-dz6jr3vu9x]

Далее в loadSong(song) Откуда он берëтся?

[@siverianserpent5559]

Молодец, очень полезное видео, пожелания: 1. Жаль что не вывел рядом время - какая секунда играет от общей длительности трека. 2. Когда делаешь математические операции деления общей длительности и т.д. - пожалуйста, объясняй логику своей мысли ,чтобы людям ещё доступнее было. Все остальное 5+

[@lets_try_js]

спасибо за фидбек ) Это одно из первых видео, еще не совсем понимал как правильно ))

[@siverianserpent5559]

@@lets_try_js для начала - очень качественно

[@lets_try_js]

@@siverianserpent5559 благодарю)

[@jfoxbe]

Отличный урок. Ещё не плохо было б сделать возможность проматывать песню не кликами а зажатием ползунка.

[@olgapedashenko3930]

Золотой человек! Спасибо огромное! Видео очень помогло, и объясняешь все отлично🤗

[@lets_try_js]

благодарю))

[@TheDaemonL]

добрый день. как реализовать несколько таких плейеров на странице? полагаю из-за querySelector работает только первый из них

[@lets_try_js]

как вариант, принимать аргумент класса в эту функцию и в тот querySelector передавать этот же аргумент, и когда вызываете эту функцию, то в нее как аргумент передаете класс того блока, куда встроить плеер) я уже точно не помню код, но есть вероятность что там придется такую манипуляцию проделать не только для плеера, но и для остальных элементов наверное ничего не понятно с моей подсказки)))

[@TheDaemonL]

вопрос снят, все сделал

[@TheDaemonL]

@@lets_try_js сделал в jquery по событию клика в одну свою функцию передал все Ваши и раскидался там все переменные по this. по итогу плеер по которому кликнул ссылается только на элементы внутри него

[@lets_try_js]

@@TheDaemonL ну я предложил лишь один из вариантов) знаете, что одну и ту же задачу можно решить кучей способов)

[@user-wb9lt4mq6p]

Спасибо за видео! А как сделать так, чтобы плеер запоминал на каком этапе воспроизведение закончилось и предлагал бы продолжить, уже после перезагрузки страницы? Как в ютубе)

[@lets_try_js]

нужно куда-то сохранять данные) это должна быть либо база данных, либо хотя-бы localstorage

[@user-wb9lt4mq6p]

@@lets_try_js Спасибо!😊

[@awenn2015]

Обновление будет , ползунок громкости ?)

[@user-oc5zg6mq7l]

Где такие иконки можно скачать ?

[@user-mt9lq4hl1c]

Замечательный урок, но ссылки но код не работают. Можно их обновить?

[@Sha-Kate]

Огромное спасибо!!! просто суперпонятно! Все глаза сегодня проглядела в поисках такого хорошего примера! Вот еще бы вопрос со звуковым прогрессом раскрыть в таком плеере и вообще супер-пупер!!!

[@lets_try_js]

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

[@Sha-Kate]

@@lets_try_js Спасибо огромное, я по этому примеру сделала сама тегом progress! Спасибо!

[@lets_try_js]

@@Sha-Kate круто! успехов в обучении)

[@user-dd2zp9hv3r]

Все классно, спасибо. Только 2 часа убил на точно не указал ‘e' при перемотке. Ты его поставил в функции как аргумент но сказал об этом, как бы строчку ниже написал, а потом между делом указал аргумент. А так все здорово спасибо.

[@chatabbk]

Очень все классно. но есть вопрос как реализовать что бы список песен выводить из MSQL + php Плиз не могу ни как найти. Помоги

[@lets_try_js]

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

[@chatabbk]

@@lets_try_js Я его тоже начинаю ненавидеть...

[@lets_try_js]

​@@chatabbk я не призываю не учить php если что)) это дело вкуса))

[@VINIPON]

Помогити спатити, у меня не работает прогрес бар, вроде всё хорошо но "correntTime" не хочет находится, пишет "undefined" а код я кажется правильно писал - function updateProgress(e) { const {duration, correntTime} = e.srcElement console.log(duration) console.log(correntTime) } всё как бы отлично но всё равно не работает, музыка всё работает, только это не хочет работать

[@user-rt1zx9ik7y]

audio.play в консоли выдает ошибку вот такого типа: uncaught in promise domexception the element has no supported sources

[@tricky_pie]

Аналогичная ошибка. Так и не смогла найти решение.

[@tricky_pie]

Решилась проблема, была ошибка в пути. Нужно было указать одну точку для выхода на папку выше, я поставила 2 как vs code подсказывал)) Вывод: вс код обманщик, а самой стоит быть внимательнее :)

[@anarchist1918]

Можно пожалуйста ссылку на ассеты?

[@lets_try_js]

Напишите мне в инсте, я на днях буду у пк и попробую найти

[@m1akarov442]

А макет ? =) Можете скинуть ?

[@lets_try_js]

в инсту напишите мне, в шапке сайта есть, я дам ссылку

[@4Aziwzjdfgnk29y]

исходник заблочен ..печаль беда

[@awenn2015]

Странная штука, когда уже немного делаешь только на react привыкаешь и уже как то не привычно смотреть на чистый js

[@efferusmode]

как сделать полоску громкости ?

[@user-yf3yt6hp3e]

Так же через input range, поищи просто как менять звук и привяжи к инпуту

[@efferusmode]

@@user-yf3yt6hp3e всё получилось, спасибо

[@user-fb7qo8td4f]

Вообще я предлагаю функцию второго клика которую придумал(может кто-то ещё придумал не знаю...) Вот функция: let i = 1 this.onclick = () => { i+=1 if(i%2==0){ Функция первого клика... }else{ Функция второго клика } Функция очень надёжная лично мне помогла, вы также можете химичить и сделать так чтобы после первого клика ничего не происходило... }