格好いいですね！
レスポンシブWebデザインがもてはやされていますが、サイト全体をレスポンシブに対応させるのは大変なことです。特に元々のデザインになかった追加要素が発生したりするとその調整に慌てることになります。
あまり使われることのないaudioタグについてもレスポンシブにして欲しい、そんな要望があがってきたら使ってみたいのがAudio Playerです。タッチフレンドリーなレスポンシブオーディオプレイヤーです。

Audio Playerの使い方

HTMLは普通のaudioタグです。

<audio src="audio.wav" preload="auto" controls></audio>  
<!-- 複数の場合 -->  
<audio preload="auto" controls><br><source src="audio.wav"></source><br><source src="audio.mp3"></source><br><source src="audio.ogg"></source><br></audio>  

JavaScriptは次のようになります。

<script src="jquery.js"></script>  
<script src="audioplayer.js"></script>  
<script><br /> $( function(){<br /> $( 'audio' ).audioPlayer();<br /> });<br /></script>  

そうするとHTMLが次のように追加されます。

<audio preload="auto" controls="" style="width: 0px; height: 0px; visibility: hidden;"><br><source src="audio.mp3"><br></source><source src="audio.ogg"><br></source><source src="audio.wav"><br></source></audio>
[Play](#)

00:00

01:06

[Volume](#)

  

これによりスタイルシートを使ってデザインが格好よくなる仕組みです。

テーブル、オーディオ、ムービー、リストの入れ子などレスポンシブでうまく表現するためにはどうしたら良いか考えさせられる要素は幾つかあります。Audio Playerはその解決の一案として参考になるのではないでしょうか。

Audio PlayerはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。

Audio Player: Responsive and Touch-Friendly — Osvaldas Valutis
Audio Player: Responsive and Touch-friendly demo by Osvaldas Valutis