графический эквалайзер
 

Привет. Пытаюсь приделать графический эквалайзер к аудио-плееру, на 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
Почему?
При этом - плеер работает - без эквалайзера.

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

Сделай так

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

или так

el = document.querySelector('li'),

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

<audio></audio>

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