HTML5とjQueryのカセットプレーヤーをリストから再生できるようにしてみた

Codropsさんの「Old School Cassette Player with HTML5 Audio」に、ポッドキャスト取り込み機能とリストからエピソードを選択する機能を追加したものを公開しました。

Demo: https://listen.ssr990.com/alt/

Download: https://github.com/magesusu/Cassette-Podcast-Player/archive/1.0.zip

使用する前の設定は、画面上のリンクからソースをダウンロードして、js/jquery.cassette.js内の14行目にあるvar Podurl = 'http://magehack.html.xdomain.jp/podcast.xml';を自分のポッドキャストのものに変更するだけです。

javascriptのコードですが、私のような素人にはjQueryのプロトタイプなどがよく分からず、そのままではさっぱりコードを編集できなかったので、単純なコードに書き直し、よく分からなかった部分は大胆に削除しました。(おい)

内部まで美しいスティーブ・ジョブズのようなコードをオブジェクト指向ガン無視の汚いコードにしてしまいましたが、ご了承ください。

あと、PHPのPodcastパーサは特に外部サイトによる使用対策などはしていませんので、入力URLを制限するなど、必要に応じて編集してください。このパーサさえあれば、どんなJavaScriptのプレーヤーでも対応できるのでとても便利ですよ。

実は最初はDJコントローラー風のプレイヤー https://listen.ssr990.com/ (オリジナルコード: http://codepen.io/michelinho80/full/GJZgwb )を使っていたのですが、DJでも使い方が分からないという問題が発生し、カセットプレイヤーに変更しました。このプレイヤーのLoadボタンを押してみてください。パーサから得た情報をslickでサムネイル付きリストにして表示しています。かっこよくて気に入っていたのですが、ユーザビリティには代えられませんからね。

ここまで、番組リクエストスタジオポッドキャスト変換アプリなど見向きもされないツールを作成して来ましたが、You tuberなどの動画制作者に便利なサービスの制作予定があります。ご期待ください。

この記事が気に入ったら
いいね ! しよう

The following two tabs change content below.
magesusu
このサイトやラジオ局のシステムを構築しているエンジニアで、主にJavaやCを扱い、ArduinoやAndroidと戯れることが趣味です。(あれっ、PHPは…) 私はフリーソフトやオープンソースと共に育ってきました。私も皆さんから利用してもらえる技術が一番だと考え、できる限り公開できるものは公開するつもりでやっていきます。感想をいただけることが何よりも嬉しいので、よろしくお願いします。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です