Визуализация музыки в Javascript
HTML-код
- Опубликовано: 25 авг 2024
- Делаем простую визуализацию аудио в Javascript. Эффект огня в камине.
👁🗨 Телеграм: t.me/frontend_du2
👁🗨 Discord: / discord
👁🗨 VK: frontend
👁🗨 Дзен: dzen.ru/frontend
👁🗨 Rutube: rutube.ru/u/fr...
Поздравляю вас с 2к подписчиками, вы достигли цели!)
Благодаря вам я почти дописал курсовой проект по базовому курсу js. Не уверен что сдам в этом году, но я постараюсь) Приходится конечно же пользоваться и сторонними ресурсами на ютубе чтобы писать курсовую, но я думаю это нормально искать и собирать информацию по крупицам опираясь на свою смекалку. Правда это пхоже на копипаст. Тем не менее я практикуюсь и запоминаю. Хоть и не всё откладывается в голове) С наступающим вас Новым Годом!
Спасибо вам за поздравление. Да, я очень рад, что мне удалось с вашей помощью добиться этой цели. Но я не останавливаюсь и ставлю новые )) И конечно желаю вам этого. Мне нравится итоговый проект по JS. На нем вы отрабатываете то, что проходили и встречаете новые трудности. После выполнения которых вам уже не так страшно выполнять задания. У вас все получится. Конечно, все знания открываются не сразу, как и у всех. С наступающим вас новым годом. Спасибо, что вы со мной и спасибо за ваше теплое сообщение :)
Благодарю брат программист! Приятно получать уроки у общительных , доброжелательных людей 😀.
Расскажи пожалуйста про canvas в отдельном видео 🤗
Спасибо за ваш комментарий. Очень приятно и буду стараться только лучше. С наступившим Новым годом вас )
Поздравляю с 2к подписчиков!)
Как всегда - спасибо за контент, и с наступающим))
Спасибо, канал успел добраться к 2000 до нового года)) Она из целей закрыта. Спасибо и вас с наступающим праздником :)
Очень крутое видео! Спасибо вам!! Прям интересно какие ещё возможности есть у JS.
Спасибо вам ) Приятно. Возможностей очень много ) Думаю следующий вебинар будет про это )
С наступающим новым годом! Вперёд за новыми победами!) И, конечно, спасибо за контент!
Большое спасибо, будем работать и развиваться и конечно же и вас желаю виновном наступившем году :) будем делать это вместе. С Новым годом ❄️
Спасибо огромное за видео! Хотелось бы понять, как сделать, чтобы можно было подгружать какую угодно музыку) с наступающим!
Спасибо вам ) да у меня есть идея создать отдельный плейлист по созданию плеера. Думаю привлечь к процессу создания зрителей канала. Уже планирую 😊
Александр, спасибо Вам огромное за такое информативное видео, ещё больше подстёгивает изучать JavaScript:) прошёл 7 модуль DOM основные типы данных, на праздниках приложение ToDo оставлю на следующий год, числа с 6 января, а пока буду смотреть Ваши видео по сортировке массивов, async/await, call-back функции.. Что-то слышал про сортировку массивов, что есть пузырьковый метод, что он самый простой.. Буду смотреть и пополнять свой багаж знаний:)) еще раз спасибо за Ваши труды, поздравляю с наступающим новым годом, и двумя тыс. подписчиков, это только начало🤟😎
Спасибо вам за такое объемное сообщение с приятным и полезным посылом. Мне очень приятно, что ролики для вас полезным и помогают вам постигать программирование на JS. Надеюсь в дальнейшем так и будет :) После седьмого модуля начинается самое интересное :)
ВАУУУУУУ
СУПЕР ТЕМА
Рад, что ролик был интересным ) Спасибо вам :)
Спасибо за видео. Как всегда топ) люблю такие кейсы, когда что-то делаешь интересное и веселое)
Отличная визуализация и контент)
Я у себя еще добавил кнопку выбора файла, где выбираю трек и через Play его запускаю))
Спасибо 👍
И с наступающим Вас Новым годом! 🎄🎅🎉
Большое спасибо, так же и вас с наступающим новым годом :)
Очень нужно такое видео!!!
Спасибо, я старался 😇
Видос топ, нужен отдельный полноценный видос по canvas
Сигнал принял ) ставлю в план, думаю получится довольно большой разбор ☺️
Полезное видео, спасибо! Запишите, пожалуйста, видео работы плеера с кнопкой пуза при нажатии на которую запись продолжается с того места на котором была остановлена. При этом прогресс бар меняет цвет в зависимости от проигрывания записи. Прогресс бар в виде картинки SVG.
Очень круто!
Но спустя год есть проблема: хром не даёт воспроизвести трек, как не меняй код.
Происходит это после добавления AudioContext.
Все написал верно... но не запускается... показывает ошибку в строке 9...columnsCount; ???? Подскажите что не так?
const columnsCount = 1024 нужно задать вверху
@@alex_dudukalo
const columnsCount = 1024;
const columnsGap = 100;
const canvas = document.getElementById('player-fireplace');
const ctx = canvas.getContext('2d');
const player = document.getElementById('audio-player');
let audioCtx = new(window.AudioContext || window.webkitAudioContext)();
let source = audioCtx.createMediaElementSource(player);
let analuser = audioCtx.createAnalyser();
analuser.fftSize = columnsCount;
source.connect(analuser);
anaLuser.connect(audioCtx.destination);
let frequencuDate = new Uint8Array(analuser.frequencyBinCount);
document.getElementById('player_btn').addEventListener('click',function(){
if(!this.classList.contains('play-btn__play')) {
player.play()
this.textContent = 'Pause'
this.classList.add('play-btn__play')
} else{
player.pause()
this.textContent = 'Play'
this.classList.remove('play-btn__play')
}
})
window.addEventListener('resize',resizCanvas,false)
function resizCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
resizCanvas();
function drawColumn(x,width,height){
const gradient = ctx.createLinearGradient(0,canvas.height-height/ 2, 0, canvas.height);
gradient.addColorStop(1,'rgba(255,255,255,1)');
gradient.addColorStop(0.9,'rgba(255,150,0,1)');
gradient.addColorStop(0,'rgba(255,0,0,0)');
ctx.fillStyle = gradient;
ctx.fillRect(x,canvas.height - height / 2,width, height)
}
// drawColumn(100, 100, 500);
// drawColumn(400, 10, 300);
let arr = [333, 123, 30, 123]
function render(){
anaLuser.getByteFrequencyData(frequencuDate);
ctx.clearRect(0, 0, canvas.width, canvas.height);
const columnWidth = (canvas.width / frequencuDate.length) - columnsGap + (columnsGap / frequencuDate.length)
const heightScale = canvas.height / 100;
let xPost = 0
for(let i=0; i
Добрый день!
Вопрос не по этой теме. 4 января вы приняли у меня практическую работу по базовому JS, но у меня осталось несколько вопросов по теме.
Где мне их задать?
Там уже комментарии закрыты
Олег Морозов
Чтобы браузер не блокировал звук, нашел такое решение
function touchStarted() { // чтобы браузер не блокировал звук
getAudioContext().resume();
}
Здравствуйте, спасибо за подсказку :) Попробую использовать. Напишите, пожалуйста в тг: @dudukalo попытаюсь ответить на вопросы, которые вы не успели задать :)
@@alex_dudukalo написал в тг
Привет, очень круто.
Вопрос: Изучаю JS , и когда делаю например ToDo приложение, есть ощущение , что я в жизни не выучу этот язык.
Эт у всех так по началу или кому то не дано от слова совсем..?
так же было, где-то через месяц практики станет намного легче.
Приветствую :) Спасибо за комментарий. Если вы до этого не изучали языки программирования, то безусловно может быть не легко. Я бы сказал, что у большинства так. Другими словами - это совершенно нормально, что у вас сложности.
От вас сейчас требуется терпение, усидчивость и много работы с материалом и конечно же практика. Делайте больше мелких задач. И больше самостоятельности. Главное не бросайте, нужно перейти эту гору и все будет лучше. Я обещаю это, но лишь при условии, что вы будете сильно стараться. Это ведь язык программирования )
Конечно, главное большое практики. Спасибо за поддержку. И что делитесь опытом с коллегами по цеху :))
у audio есть булевое значение paused, для проверки играет музыка или нет, так же можно этим значение проверять что в кнопке
Спасибо, не знал. Не сильно углублялся в документацию по аудио. Изначально способ с добавлением класса хотел использовать для изменение стиля кнопки при воспроизведении )
Не работает. Скачал исходник. Развернул лок сервер через питон в3. После нажатия на кнопку плей тишина и ничего не происходит.
Прошу помощи)
Когда убираю часть кода, где про let audioCtx = new(window.AudioContext || window.webkitAudioContext)();
Звучит по нажатию, но, понятное дело, без визуала
Браузер блокирует воспроизведение. Он разрешает это сделать, когда вы что то измените в коде. Попробуйте добавить переносы строк в код или сделайте в нем что то. Тогда он сможет запускать музыку. - костыльно, но думаю скоро я поищу решение, как это обойти :) let audioCtx = new(window.AudioContext || window.webkitAudioContext)(); можно вернуть
АААААААААААААААААААААААААААААА!!!!
НА ВИНДЕ 11 НЕ РАБОТАЕТ, НИКАК, НЕ Я, НЕ ПРЕПОДОВАТЕЛИ НЕ ПОНИМАЮТ КАК ЭТИМ ПОЛЬЗОВАТСЯ!!!!!!!!!!!!
ПОМОГИТИ!!!!!
ошибка в строке 9 .... что не так? const columnsGap = 100;
const canvas = document.getElementById('player-fireplace');
const ctx = canvas.getContext('2d');
const player = document.getElementById('audio-player');
let audioCtx = new(window.AudioContext || window.webkitAudioContext)();
let source = audioCtx.createMediaElementSource(player);
let analuser = audioCtx.createAnalyser();
analuser.fftSize = columnsCount;
source.connect(analuser);
anaLuser.connect(audioCtx.destination);
let frequencuDate = new Uint8Array(analuser.frequencyBinCount);
document.getElementById('player_btn').addEventListener('click',function(){
if(!this.classList.contains('play-btn__play')) {
player.play()
this.textContent = 'Pause'
this.classList.add('play-btn__play')
} else{
player.pause()
this.textContent = 'Play'
this.classList.remove('play-btn__play')
}
})
window.addEventListener('resize',resizCanvas,false)
function resizCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
resizCanvas();
function drawColumn(x,width,height){
const gradient = ctx.createLinearGradient(0,canvas.height-height/ 2, 0, canvas.height);
gradient.addColorStop(1,'rgba(255,255,255,1)');
gradient.addColorStop(0.9,'rgba(255,150,0,1)');
gradient.addColorStop(0,'rgba(255,0,0,0)');
ctx.fillStyle = gradient;
ctx.fillRect(x,canvas.height - height / 2,width, height)
}
// drawColumn(100, 100, 500);
// drawColumn(400, 10, 300);
let arr = [333, 123, 30, 123]
function render(){
anaLuser.getByteFrequencyData(frequencuDate);
ctx.clearRect(0, 0, canvas.width, canvas.height);
const columnWidth = (canvas.width / frequencuDate.length) - columnsGap + (columnsGap / frequencuDate.length)
const heightScale = canvas.height / 100;
let xPost = 0
for(let i=0; i
Не вижу в вашем коде, где именно вы определили (задали значение columnsCount) columnsGap есть, а columnsCount вы не указали