radiko の再生速度変更用 bookmarklet を作った

radiko でラジオを聞くことが多いのだが、再生速度を変えられないのがすごく不便。 アプリ版は手を出しづらいので、Web版に再生速度変更機能を追加する bookmarklet を作った。

実行結果

ついでに、指定秒ジャンプ機能もある。

コードは Gist に置いた。

radiko に再生速度変更ボタンと指定秒ジャンプボタンを追加する bookmarklet

ブックマーク作りやすいように現在のバージョンでリンクを作ってみた。
link
(terser で短縮後、はてなブログのMarkdown解釈がバグっている(?)部分への対処で少し手を入れているので、そのバグが直されたらうまく動かないリンクになるかも)

PC版 Firefox & Chrome と Android版 Chrome にて動作確認済み。Android版 Firefox はあるバージョンから bookmarklet が起動できなくなってしまったらしいので動作未確認。

軽い解説的ななにか

短めに記述しつつ、読みやすさも残してみた。コード中にコメントがないので軽く書いておく。JavaScript は素人なのでおかしな書き方してるかもしれない。

処理の流れ

1. 多重呼び出し防止
2. ボタン類の追加
3. ジャンプ用アロー関数定義
4. ジャンプ用ボタンにイベントリスナを設定
5. 再生速度更新用アロー関数定義
6. 再生速度変更用ボタンにイベントリスナ設定
7. 定期的に再生速度更新
8. サーバー指定を置換

元々 radiko のページ中で jQuery を使っていたので、要素の指定などに利用している。

指定秒ジャンプは、radiko 側のコードとの相性などを考えると、シークバーの位置を動かした体(てい)にするのが最も良さそう。

定期的に再生速度更新処理を呼び出すのは、停止・再生で audio オブジェクトが新しいものに切り替わっちゃうのに追従して速度設定するための手抜きコード。 audio オブジェクトは毎回関数で現在使われているものを引っ張ってくるようになっている。

接続先サーバの変更は、やらないと再生速度上げたときにとぎれとぎれになる。smartstream.ne.jp からは等速に近いスピードでしかダウンロードされないみたい。 このコードで指定しなくても、元々第2候補として radiko.jp は指定されている。なので、ブラウザ拡張の uMatrix 等で外部のサーバに繋がない設定になっていれば自然に radiko.jp につながる。

やってみて

いくらか改善点はあるが、だいたいやりたいことができるようになったのでほぼ満足。 radiko 側のコードを結構見たが、腐ってる部分も多そうなので、中の人はなんとかしたほうがいいと思う。