audiojs のプレイヤーの横幅を変更する

MP3プレイヤーをjQueryとHTML5で実現しようと探したら、audiojsにたどり着く。しかし、なぜかFirefoxでは動かないし（どうやらFlashプラグインの「保護モード」が問題らしい）と思っていたら、とりあえず、OKが出たので、実装してみた。

通常、htmlソースは、CMSに1件だけ入れているけど、そこから、いろんなアーカイブに展開していて、audiojsで表示するプレイヤーの横幅がページによって違う。今回、１つのソースから、３つのページに展開するためどうしようかと。

仕方ないので、横幅が狭いページだけ、プレイヤーの横幅を縮めるということをやってみた。

 

そしたら、１つのhtmlソースを使って、ページごとにCSSを変えれば良いね。微調整はChromeでリアルタイムにした。

 

2013.09.24追記：どうやらMTのエントリーでaudiojs用のolを作成すると、特殊な属性が開くたびに通らないという問題に出くわす。

例）

<ol>

<li>

<a data-="" href="#" data-src="http://tonpi.net/audio/pol/09s.mp3"> jewelryの在り処</a>

</li>

</ol>

 

上記、太字部分は、何かのタイミングで追加されてしまうため、保存する前に、削除しないといけない。