jQueryの最近のブログ記事

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

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

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

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

 

 .audiojs {
width:330px;
}
.audiojs .scrubber {
width:160px;
}

そしたら、1つの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>

 

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

 

  • Comments (Close): 0
  • TrackBack (Close): 0

Index of all entries

Feeds
About

supported by TOGORU

Return to page top