Форум

cupoma58 · #1 (**permalink**) 10.01.2026, 18:19

Привет. Пытаюсь приделать графический эквалайзер к аудио-плееру, на jQuery:

<ul class="playlist"> 
    <li audiourl="file.mp3" cover="file.jpg" artist="Name">Song</li>
    .....
</ul>

Плеер, под каждый трек:

jQuery

function initAudio(elem) {
    var url = elem.attr('audiourl'),
        song = new Audio('data/' + url);
.....
}

Графический эквалайзер, в head:

window.onload = function() {
    // инициализация аудиоконтекста и элементов
    var audioContext = new (window.AudioContext || window.webkitAudioContext)(), 
	    el = document.getElementsByTagName('li'),
	    url = el.getAttribute('audiourl'),
        audioElement =  new Audio('data/' + url),
        canvas = document.getElementById('canvas'),
        canvasContext = canvas.getContext('2d');
    .....
};

Как результат: Uncaught TypeError: el.getAttribute is not a function
Почему?
При этом - плеер работает - без эквалайзера.

Aetae · #2 (**permalink**) 10.01.2026, 18:28

document.getElementsByTagName('li')
У тебя в el коллекция всех li на странице, а не какой-то конкретный.

Сделай так

el = document.getElementsByTagName('li')[0],

или так

el = document.querySelector('li'),

cupoma58 · #3 (**permalink**) 15.01.2026, 15:00

Сообщение от enoperating

Исправить можно так:
var el = document.getElementsByTagName('li')[0]

В скрипте плеера - нет элемента audio

<audio></audio>

Каждый раз(по click), функция initAudio(elem), создаёт новый плеер. Трек [0] запускается только в начале, если небыло выбора по плей-листу.
Пробовал через each() - не пошло.

Опан1 · #4 (**permalink**) Сегодня, 12:10

Попробуйте такое решение, как его приделать:

<head>
<title>Графический эквалайзер</title>
<meta charset="utf-8" />
<meta name="viewport" content="height=device-height,width=device-width, user-scalable=no, initial-scale=1">
<style>
canvas{
	background: blue;
}
ul{
	cursor: pointer;
}
li:hover{
	background: gold;
	width: 100px;
}
</style>
</head>
<body>
<canvas id=canvas></canvas><br /><br />
<ul class="playlist"> 
    <li onclick="audio.src='stekla.mp3';audio.play()">Sound1</li>
	<li onclick="audio.src='naetoy1.mp3';audio.play()">Sound2</li>
	<li onclick="audio.src='dlalekcii.mp3';audio.play()">Sound3</li>
</ul>
</body>

canvas.width = 1024;
canvas.height = 256;
const audio = new Audio();
audio.controls = true;
document.body.append(audio);
audio.onplay = function(){
	audioCtx = new AudioContext();
	let source = audioCtx.createMediaElementSource(audio);
	let analyser = audioCtx.createAnalyser();
	source.connect(analyser); // Подключаем анализатор к элементу audio
	analyser.connect(audioCtx.destination); // Без этой строки нет звука, но анализатор работает.
	let frequencyData = new Uint8Array(analyser.frequencyBinCount);
	let ctx = canvas.getContext('2d');
	setInterval(function(){
		analyser.getByteFrequencyData(frequencyData); // Записываем в массив данные уровней частот
		ctx.fillStyle = "black"; // Задаём цвет фона
		ctx.globalAlpha = 0.05; // Это для получения эффекта плавного погасания полос
		ctx.fillRect (0, 0, canvas.width, canvas.height); // Полупрозрачно чистим экран
		ctx.globalAlpha = 1;
		for(i = 0; i < canvas.width; i ++){
			let ii = Math.floor(i / canvas.width * 1024);
			let dd = frequencyData[ii] / 256 * canvas.height;
			ctx.fillStyle = "rgb(" + (128 + 128 * Math.sin((ii + 200 / canvas.width * 1024) / 43)) + ", " + (128 + 128 * Math.sin(ii / 73)) + ", " + (128 + 128 * Math.sin(ii / 35)) + ")";
			ctx.fillRect(i, canvas.height - dd - 1, 1, dd); // рисуем полосу
		}
	}, 20);
}

Живая ссылка: https://mysynthesizer.github.io/inde.../analiser.html

Форум

Справочник

Discord чат

Курсы javascript