AudioPlayerをHTML5に対応させる&Audio.jsでデザインを揃える方法まとめ

2015-6-28

AudioPlayer(http://wpaudioplayer.com/)をHTML5に対応させる方法

そのままだとPC版IEやFirefox、スマホで表示されないが、audio-player.phpを一部分、書き換える事でHTML5 audio playerを代わりに使用できる。
参照:wordpressのプラグイン「Audio Player 」をiPhoneではHTML5で動作させる ≪ WeBridge

Audio.js(audio.js

ただHTML5 audio playerはブラウザ毎にデザインが異なるので、揃えたい時はAudio.jsを使用する。※ChromeではAudioPlayerが優先される。
使い方は配布元の通り。

この時、audio-player.phpに記載する内容も一部変える。<>は小文字に直す。

デフォルトのまま
$playerCode .= ‘<audio src=”‘ . $actualFile . ‘” controls preload=”none”>’;
audio.jsでデザインを揃える
$playerCode .= ‘<audio src=”‘ . $actualFile . ‘” preload=”auto”>’;

web by FC2

コメントは受け付けていません。