Делаем аудиоплеер HTML / SCSS / JS.
HTML-код
- Опубликовано: 5 июн 2024
- 🏆 Поднять мотивацию и получить плюшки(сборка, исходники, чат со мной):
🔹 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 Клянчу фидбек о моих видео
📨 Сотрудничество ► timoschuk.roman@gmail.com
📨 Business inquiries ► timoschuk.roman@gmail.com
Ребят, накидайте фидбека )
Спасибо большое, а как сделать отключение звука на айфоне, при отключения звука аппаратной кнопкой?)
Спасибо! Все понятно с первого раза!
@@user-lj3fk5to2g рад стараться)
За урок спасибо, но представь что ты в самом начале пути обучения(ты бомж-студент из общаги, который ест хлеб с мазиком и огурцами, ходит везде пешком) У тебя нет денег на патреон. Представил? Ок, выложи ссылку на макет. Графику с аудио на гугл диск для таких людей тоже выложи плз, если не сложно.
А то хочется учиться и повторить урок, но...
@@wizartable у меня не осталось исходников
это лучшее, что я нашел по запросу "как сделать аудиоплеер". порезал на кусочки, пережевал все 100 раз, в рот положил. респект за твой труд
спасибо)
Благодарю за ваш труд. Очень нравится как объясняете. На таких вот практических задачах, и учишься.
Благодарю )
Сложно было найти подобный контент на русском, спасибо за старания, ты молодец!
благодарю)
@@lets_try_js единственная проблема в том, что у меня duration возвращает почему-то Infinity, не совсем понимаю почему...
Вот это контент! Супер спасибо, получилось в своем проектике по аналогии реализовать работу плеера, очень хорошее объяснение! И еще было бы интересно посмотреть на добавление возможности регулировать громкость.
Спасибо тебе огромное) Доносишь информацию максимально просто и понятно
Благодарю ))
Отличный урок! Большое спасибо!!!
Огонь! Спасибо за урок! Все понятно и доступно для начинающего) Попробовал повторить...всё получилось)
рад помочь )
Если удалось повторить. Значит наверное и понять. Можете тогда подсказать как после объявления массива через переменную songs далее используется song?
Круто , искал такой контент . Спасибо за видео!
спасибо)
раз помочь )
Офигенный урок, спасибо
Все отлично! первое нормальное видео с объяснением кода за сегодня) Продолжай в том же духе
Спасибо )
@@lets_try_js единственное у меня не работает ${song} пришлось сделать + song +'mp3'
@@user-yj3lf2nl6w главное что в итоге все получилось)
Спасибо вам большое за этот урок. Помимо того как делать плеер, узнал много интересных вещей!)
Большое спасибо за это
замечательное видео.
Вы объяснили нам много хороших
вещей - мне понравилось.
Все найкраще.
это очень крутой урок, спасибо ОГРОМНОЕ!
Спасибо за видео! Очень доступно объясняете
Круто 🔥🔥🔥, обязательно попробую сделать, спасибо большое!
успехов тебе)
у тебя все получится)
Продолжай так же бро, видосы просто топовые!!!
Спасибо за видео, очень все понятно и круто!
спасибо за отзыв )
Спасибо большое за подробный урок!) Еще и с тайм-кодами. Автор умничка :)
благодарю)
Круто, контент на высоте) Спасибо
благодарю)
очень круто и легко объяснил, спасибо
Спасибо за видео! По поводу подачи материала все хорошо. Отличный микрофон, приятный голос, культурная речь. К сожалению, не могу оценить насколько всё хорошо объясняется, так как совсем новичок, но подача очень хорошая.
Спасибо! Ну, все мы когда-то были новичками. Успехов в обучении! )
Большое спасибо. Смотрела на перемотке. Хочется все быстрее))) видос классный и полезный. Жаль не сразу попался мне.
Успехов!
спасибо)
все отлично, продолжай в том же духе
Искал, нашел!!! Спасибо за тутор!!!
рад помочь)
Спасибо огромное, очень помогло в работе
рад помочь)
Спасибо за урок. Я только начала свой путь в IT, много не знаю. Очень долго искала подобный урок. Все отлично разжевано. Действительно еще сюда добавить кнопку звука и цены бы не было.
Все очень доходчиво!!! Супер просто!!!!
рад помочь)
Ты лучший! Спасибо большое мужик!!!
О, круто, сейчас попробую сделать плеер по видео
Спасибо, крутой урок
Дай бог вам здоровья за такой крутой ролик ❤
благодарю)
Спасибо, дружище, очень понятно и доступно!!! Для начинающих этот видос просто бомба!!!!
благодарю)
спасибо! отличная работа = спасибо!
Спасибо огромное, Ваша работа конечно шикарно выглядит, вроде визуал обычный, но макет круто сделано и сама реалищация очень доступная, у меня было полегче требование, вы очень помогли, спасибо!!!
рад оказаться полезным)
Большое спасибо за отличную работу!!! Мне было очень полезно твое видео! Было бы круто, если бы было открыто параллельно два экрана сразу(html документ и js), так проще ориентироваться к чему обращаешься в процессе )))
я никак не привыкну к таком формату, когда два окна ))
Cпасибо! супер понятно работает!
Спасибо большое)
рад помочь)
Спасибо за контент 👍 давай ещё вёрстку со своей супер крутой сборкой
есть в планах такой видос, но еще не знаю что выбрать
верста сложного макета с крутыми анимациями или что по - проще)
@@lets_try_js первый вариант)
@@lets_try_js конечно сложного 🤘🏻
Все круто
Ты очень хорош. Долго искал как сделать свой плеер у меня есть макет каторый я хотел сверстать там кнш все подругому но ты с кайфом обянил и я сделал этот макет теперь он чуть денамичней и деше прияно все четко все красиво продолжай
Спасибо! Только недавно случайно увидел канал! Хорошо, что подписался! Лайк, колокол нажал!)
воу)))
спасибо тебе !))
Жеско мужик!
сделано, хорошо. мне как новичку было приятно слушать. без воды, по пунктам, чётко и понятно, каждый шаг осмыслен и объяснён. не нужно было останавливать видео чтобы понять что конкретно ты сделал. продолжай в том же духе. единственное что я не понял немного как ты работаешь с классами внутри css но это скорее отсутствие части фундаментальных знаний, чем твоя недоработка. буду рад новым видео!
Спасибо за такой расширенный фидбек)
@@lets_try_js а есть у вас репозиторий с этим уроком? есть вопросы, хотел бы сравнить код
UPD. пересмотрел ещё раз и понял, что у нас с вами некоторые нюансы различаются касательно определения классов в css. но не страшно за 2 часа нашёл как вырулить) ещё раз спасибо, всё получилось
@@user-kd4yc5jl9w есть архив
напиши мне в личку, в инсте (ссылка в шапке канала), скину )
Да действительно хитро вложенные классы получаются... Как это работает?
Спасибо за туториал, оказалось то что мне нужно. Жаль только не реализовывал таймер показывающий время песни в минутах и секундах а также изменение громкости при помощи ползунка.
ЛУЧШИЙ!
Урок зашел. Продолжай в том же ключе ))
О вас еще мало знают, но как узнают ..... Вы уже не будете успевать нам отвечать =) Этого мы вам и желаем ! Контент лучше многих "блоггеров" программистов . Вы проффесионал !
Я тебя люблю, ты мне жизнь спас❤❤❤❤❤
лайк, подписка, комент! Двигаем контент
Спасибо
Большое спасибо за урок! Желаю успехов! :)
Спасибо тебе за видео, я добавил кнопку полноэкранного режима, мут, перемотка на 10 сек вперед и назад, при нажатии на пробел останавливать и воспроихводить видео, а чтобы сделать кнопку с настройков качества видео, надо библиотеку специальную?
Дякую)
рад помочь)
привет спасибо большое выручил
а как добавить регулятор громкости ?
спасибо за отличную работу!!! контент на высоте, все понятно и круто!
Привет! Подскажи пожалуйста, какой у тебя шрифт используется ? очень приятен для глаз, хочу себе тоже такой сделать)) Ролик топ)
шрифт в редакторе. ?
если да, то он называется JetBrains Mono
здравствуйте, хороший урок , хотел спросить какая программа использовалась для создания макета?
здравствуйте)
я работаю в Figma для отрисовки дизайна)
Шикарный урок.,когда трек заканчивается сделал так ,но вроде тоже работает
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()
}
}
Спасибо больше за контент! Искал видео на примере которого смогу поработать с аудио файлами. Решил улучшить немного плеер добавив визуализации звука прямо над прогресс-баром:
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;
}
}
За основу взято иностранное видео. Кому интересно вот ссылка: ruclips.net/video/VXWvfrmpapI/видео.html&ab_channel=Frankslaboratory
Чтобы все заработало, необходимо добавить сам канвас в html разметку, как-то так:
Удачи всем кто постигает JS в эти трудные времена и еще раз спасибо за потрясающие видео!
Вау, круто 👍
Если сам ютуб не удалит этот коммент(не любит ссылок в комментах) то я его оставлю, думаю людям будет весьма полезно)
Огромное спасибо!!! просто суперпонятно! Все глаза сегодня проглядела в поисках такого хорошего примера! Вот еще бы вопрос со звуковым прогрессом раскрыть в таком плеере и вообще супер-пупер!!!
можете написать мне в инсте(ссылочка есть в шапке канала)
я дам ссылочку, где можно посмотреть код плеера, в котором есть регулятор громкости)
там все просто, я вряд ли буду дополнять этим материалом)
@@lets_try_js Спасибо огромное, я по этому примеру сделала сама тегом progress! Спасибо!
@@Sha-Kate круто!
успехов в обучении)
ты босс :*
Спасибо за урок, сначало у меня не получалось, убил 2 дня чтоб понять и только на второй понял что я ставил ' а должно было быть `.
Отличный урок. Ещё не плохо было б сделать возможность проматывать песню не кликами а зажатием ползунка.
Золотой человек! Спасибо огромное! Видео очень помогло, и объясняешь все отлично🤗
благодарю))
Что за программу для написания кода используешь?
Отличное видео. Подскажите, пожалуйста, делаю всё как на видео, но прогресс двигается то ровно, то зависает и потом перескакивает. С чем это может быть связано?
Есть видео твоих настроек и плагинов VS Code ? мне понравилась анимация мерцающей линии и шрифт
есть видео на эту тему на канале
Не улавливаю откуда взялось имя song, если массив присвоен переменной songs?
Далее в loadSong(song) Откуда он берëтся?
Молодец, очень полезное видео, пожелания:
1. Жаль что не вывел рядом время - какая секунда играет от общей длительности трека.
2. Когда делаешь математические операции деления общей длительности и т.д. - пожалуйста, объясняй логику своей мысли ,чтобы людям ещё доступнее было.
Все остальное 5+
спасибо за фидбек )
Это одно из первых видео, еще не совсем понимал как правильно ))
@@lets_try_js для начала - очень качественно
@@siverianserpent5559 благодарю)
добрый день. как реализовать несколько таких плейеров на странице? полагаю из-за querySelector работает только первый из них
как вариант, принимать аргумент класса в эту функцию и в тот querySelector передавать этот же аргумент, и когда вызываете эту функцию, то в нее как аргумент передаете класс того блока, куда встроить плеер)
я уже точно не помню код, но есть вероятность что там придется такую манипуляцию проделать не только для плеера, но и для остальных элементов
наверное ничего не понятно с моей подсказки)))
вопрос снят, все сделал
@@lets_try_js сделал в jquery по событию клика в одну свою функцию передал все Ваши и раскидался там все переменные по this. по итогу плеер по которому кликнул ссылается только на элементы внутри него
@@TheDaemonL ну я предложил лишь один из вариантов)
знаете, что одну и ту же задачу можно решить кучей способов)
Обновление будет , ползунок громкости ?)
Все классно, спасибо. Только 2 часа убил на точно не указал ‘e' при перемотке. Ты его поставил в функции как аргумент но сказал об этом, как бы строчку ниже написал, а потом между делом указал аргумент. А так все здорово спасибо.
Спасибо за видео! А как сделать так, чтобы плеер запоминал на каком этапе воспроизведение закончилось и предлагал бы продолжить, уже после перезагрузки страницы? Как в ютубе)
нужно куда-то сохранять данные)
это должна быть либо база данных, либо хотя-бы localstorage
@@lets_try_js Спасибо!😊
Где такие иконки можно скачать ?
Замечательный урок, но ссылки но код не работают. Можно их обновить?
Очень все классно. но есть вопрос как реализовать что бы список песен выводить из MSQL + php Плиз не могу ни как найти. Помоги
спасибо что посмотрел ролик, но с этим вопросом, увы, я тебе вряд ли помогу.
так как у меня крайне негативное отношение к php и я попросту не знаю, как это сделать
@@lets_try_js Я его тоже начинаю ненавидеть...
@@chatabbk я не призываю не учить php если что))
это дело вкуса))
Можно пожалуйста ссылку на ассеты?
Напишите мне в инсте, я на днях буду у пк и попробую найти
А макет ? =) Можете скинуть ?
в инсту напишите мне, в шапке сайта есть, я дам ссылку
Помогити спатити, у меня не работает прогрес бар, вроде всё хорошо но "correntTime" не хочет находится, пишет "undefined" а код я кажется правильно писал
-
function updateProgress(e) {
const {duration, correntTime} = e.srcElement
console.log(duration)
console.log(correntTime)
}
всё как бы отлично но всё равно не работает, музыка всё работает, только это не хочет работать
audio.play в консоли выдает ошибку вот такого типа: uncaught in promise domexception the element has no supported sources
Аналогичная ошибка. Так и не смогла найти решение.
Решилась проблема, была ошибка в пути. Нужно было указать одну точку для выхода на папку выше, я поставила 2 как vs code подсказывал)) Вывод: вс код обманщик, а самой стоит быть внимательнее :)
как сделать полоску громкости ?
Так же через input range, поищи просто как менять звук и привяжи к инпуту
@@user-yf3yt6hp3e всё получилось, спасибо
Странная штука, когда уже немного делаешь только на react привыкаешь и уже как то не привычно смотреть на чистый js
исходник заблочен ..печаль беда
Вообще я предлагаю функцию второго клика которую придумал(может кто-то ещё придумал не знаю...)
Вот функция:
let i = 1
this.onclick = () => {
i+=1
if(i%2==0){
Функция первого клика...
}else{
Функция второго клика
}
Функция очень надёжная лично мне помогла, вы также можете химичить и сделать так чтобы после первого клика ничего не происходило...
}