Динамическое управление аудио HTML5 с помощью JavaScript

у меня есть своего рода галерея с 10 или около того миниатюрами, каждая из которых представляет одну песню. Чтобы управлять воспроизведением каждого из них, я установил кнопку воспроизведения, чтобы она появлялась через jQuery. Покопавшись в Центре разработки Apple, я нашел собственный JavaScript для управления звуком. Он прекрасно работает, но написан для управления одним объектом за раз. Что я' Я бы хотел переписать его как одну функцию, которая динамически управляет воспроизведением / паузой выбранной вами миниатюры.

Ниже приведен код, который я обнаружил ... работает, но было бы много ненужного кода для напишите 10 раз.

Всегда спасибо за вашу помощь и совет!

HTML:

    <div class="thumbnail" id="paparazzixxx">
        <a href="javascript:playPause();">
            <img id="play" src="../images/icons/35.png" />
        </a>
        <audio id="paparazzi">
            <source src="../audio/fernando_garibay_paparazzisnlmix.ogg" type="audio/ogg" />
            <source src="../audio/fernando_garibay_paparazzisnlmix.mp3" type="audio/mpeg" />
            Your browser does not support HTML5 audio.
        </audio>
    </div>

JavaScript:

<script type="text/javascript">
       function playPause() {
       var song = document.getElementsByTagName('audio')[0];
       if (song.paused)
           song.play();
       else
           song.pause();
       }
</script>