こんばんはFlowlightです。ここ数日HTMLと格闘しておりました。っといっても、置き換え作業をレンダリングとかの合間に行っていただけなのですが、ようやくまともに動くようになってきたのでご報告します。先日のブログで記載したaudioタグだけのソースですが、私のAndroid端末ではなんだか表示がおかしかったです。やっぱり、バージョンごとに表示の不具合があるようですね、、、。
audioタグのcontrolsの使えなさっぷりを体感してみた
http://qiita.com/tadfmac/items/14b3c679470e3c83d991
Android端末のGoogle Chromeではしっかりと表示できていたので、標準ブラウザの不具合のようです。そこで、色々と試して表示もできて結構綺麗に見えるものを選択いたしました。とりあえず、WorksのBGMサンプルページを変更してみました。Flashから変えたけど、そんなに変わってないように思います、、、が、視聴できなかった方々がいたはずなのでしてもらえるようになったはずです！お仕事お待ちしております！！
Flowlight smple BGM
http://flowlight-music.com/works/sample.html
かなり簡単に導入できてAndroid端末でも表示はばっちりでした。この調子で他のところも随時置き換えを進めて行こう。音のサイトなのに肝心の再生が出来なのではもともこもないので！改装の参考にしたサイトは以下のものです。
The jQuery HTML5 Audio / Video Library
http://jplayer.org/
jQueryプラグイン「jPlayer」の使い方
http://phpjavascriptroom.com/?t=strm&p=jplayer
この辺りを参考にして、コピペでいけました。javascriptやCSSの読み込み場所だけを変えてあげれば、後は中身のタイトルとかアドレスを書き換ええるだけで簡単に表示してくれました。jPlayerのexamplesの中のソースをまるっとコピーして編集すればすんなり完成です。ちょっとソースがごちゃごちゃしているので、外部化とかして読みやすいように編集もしていければと思ってます。時間作ってやっていきますね。WordPress上ではjavascriptの設定が厄介なので、今後音データをこのブログに張る場合はちょっと考えなければなりませんね。
情報科学屋さんを目指す人のメモ
http://did2memo.net/2014/04/15/wordpress-theme-javascript/
WordPressではPHPなども使わないといけないようなで、ここはスルーしようと思います。audioタグだけでは表示エラーが出るようなので、こちらの方法を試してみようかと！
WordPress Audio Player | MP3オーディオプレーヤー プラグイン
http://alphasis.info/2011/05/wordpress-audio-player/
[audioplayer file=http://flowlight-music.com/mp3/karennamaiwo.mp3 width=”300″ titles=”karennamaiwo” artists=”Flowlight”]
こちらFlash版からWordPressに移植されてたんですね。プラグインを入れれば何とか動くようです。ちょっと残念なのが、タイムカウンターがマイナス表示になってる。なんでかよくわからないのですが、これ以外はたぶん問題なく動作しそうです。とりあえず、ブログに張るときはこれをaudioタグと併用して使っていこうと思います。これで、ひととおりのことはできそうなので運用を頑張って参ります。
ちなみに、Soundcloudは貼れるのか試してみる！これはやっぱり大丈夫ですね。
ちょっと時間がたって追記！WordPress Audio PlayerもAndroid端末で表示確認したら私の端末では、駄目だったのでもはやiframe（soundcloud）とaudioタグを両方使うようにした方がいいかもしれないですね。Androidのバージョンや機種にも表示は依存しそうですね。やっぱりこういうのはあんまり悩んでも切がなさそうなので、一旦これで運用をして行きます。
それでは、この辺りで失礼いたします。