slickでアルペジエーター作ってみた

slickを使って画像をスライダーとして動かしていた時、ふと思いつきました。画像にあたる部分を音声ファイルに置き換えれば一定の間隔で音が変わってアルペジエーターのようなものが作れるのではないかと。

制作過程

まず、単純にスライダー内の画像ファイルの部分にそのままwavファイルを入れてみました。しかし、思い通りにいかなかったため違う方法を考えました。
次の方法として、li要素の属性tabindexの値を監視して、各liの変化に応じて音声のミュートとミュートの解除を行う方法を考えました。現在制作中です。

おまけ

ついでにスライダーを使ってさいころを作ってみました。
slickでautoplay,infiniteを適用し、autoplaySpeedとspeedの値を上げることで、目視できない速さで画像が切り替わります。
スライダーの要素上にマウスを置くと画像が止まるので簡単に使用できます。何か違うものも作れるかもしれません。

$('.slider').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    infinite: true,
    autoplay: true,
    arrow: false,
    prevArrow: NamedNodeMap,
    nextArrow: NamedNodeMap,
    autoplaySpeed: 1,
    speed: 5,
});