音が途切れないサイト作った

以前に案件で非同期遷移ライブラリーのpjaxを使ったサイトに携わってから、 「radiko（http://radiko.jp/）みたいに、音が途切れないサイトを作れるかな？」 と、去年の12月から着手して、暇な時にちょこちょこ作業し、やっとこさ完成ッッ

benisyougaten.sakura.ne.jp

要件

• プレイヤーが起動したら、ページ遷移しても音が途切れない。
• レコード屋さんのECサイトの設定なのでちゃんとカート機能があって決済完了できる。

使った技術

• WordPress
• Welcart（WordPressのECプラグイン）
• pjax（falsandtru版https://github.com/falsandtru/）
• plyr.js（https://github.com/sampotts/plyr）

苦労した点

• formのpost送信する際、pjax遷移がうまくいかないので、非同期でカートイン出来る有料plugin（WCEX Widget Cart）を購入した。
• ↑と同じ理由でカートページやお問い合わせページは、iframeで呼び出すようにした。

よかったこと

• ポートフォリオ的なものが無かったので、やっとひとつWEB上で見せられる作品が出来た。
• 試行錯誤し、一部有料プラグインに頼ったりしつつも、要件をクリア出来た。
• pjaxの癖も大体わかったので今後、シームレスな遷移を実現するのに気軽に導入出来そう。
• plyr.jsでのaudio制御も体験出来た。

作ったものを紹介するポートフォリオサイトがあると良さそう！ 次はそれ作ろう。