埋め込みオーディオUIのプラグインで見た目をカスタムしたサンプルだよ

直書き版

川の音が流れるよ！音量注意だよ。

モーダルに組み込みした版

• 
  かわのおと

  かわのおとだよ～(`・ω・´)

• 
  あめのおと

  あめのおとだよ～٩(๑❛ᴗ❛๑)۶

• 
  リンクのみ

  音はないよ～(´・ω・`)

• 
  リンクナシ

やりかた

付属のjsとjQuery、cssをリンクしよう。このcssで好きな見た目に変更できるよ。

jsはこんな感じ。すべてのaudioタグに反映したいので「audio」に「audioPlayer()」をくっつける。


html5のaudioタグを使おう。


モーダルとかにしてもつかえるよ。

クレジット

・音素材：効果音ラボ
・プラグイン：audioplayer.js(MIT)
・jquery1.12.4を使用しています
・元のサイト：ZG
※イラストは自前です。配布していません。