こんにちは、フロントエンドエンジニアのはっちゃんです。 最近はブラウザでさまざまなことが再現できるようになりました。たとえば、WebサイトにBGMを入れたくなるときってありますよね? その場合は、当然サウンドのON/OFFの切り替え機能を作ってユーザーに配慮することが必要になります。 しかし、弊社には「期待を超えろ」というスローガンがあります。そのまま作ることは会社的にも個人的にもプライドが許しません。 そこで今回は、単なるサウンドのオン・オフ切り替え機能にとどまらず、それをさらにパワーアップさせた「サウンド ON/OFF + BGM切り替え + イコライザーアニメーション」を作ってみようと思います。 準備するもの BGMのコントールに重宝するHowler.js Howler.jsはさまざまな音楽ファイルのフォーマットを扱うことができ、再生のON/OFF、ストップ、ミュートなどを簡単に実装