そもそもの始まり ～動かないプレーヤーがあったので～

まず最初 いつもどおりにネットサーフィンしていました
たまたまこのサイト を開いたとき 右側のサイドバーの上にあるプレイヤーが動いてない感じでした
再生を押す前の状態でアイコンがきそうな場所が□だけあって読み込みエラーぽい感じです
再生の「▶」を押しても再生はされません
↓


特に音楽が聞きたいわけでもなければ放置でいいところですが cssやjsでウェブページ作ってるので私的にはなんかすごく気になります

更新はあって放置されてる感じでもないのに今やトップレベルにユーザが多いChromeで動かないのを放置してるとは考えづらいです
最近のブラウザの更新でなにか変わったのかな？とか考えながらコンソールを見てみても何も出てないです

すごく原因が気になります！

そういえばChromeじゃなかった

よく考えると 今ページを開いてるのは ChromeじゃなくてChromodoです
バージョンはメジャーバージョンは43で一緒です
マイナーバージョンは少し違いました

一応Chromeで開いてみると なんと動きました！！

ChromodoでもFlashは問題なく動くし 問題あるならJavaScript？
最新版が動かないならともかくChromodoはChromeよりわずかに古い版です
JavaScriptならChromodoでも普通問題ないと思うんですが……

どこが違うの？

とりあえずChromeとChromodoでの違うところを揃えていきます

広告ブロックの拡張機能が原因かもということで拡張機能を無効にするため両方共シークレットモードにします
が やっぱり動かないです

サーバ側でブラウザ名によって別スクリプト送ってたり？とも考えましたが ChromeのもChromodoのも同じファイルでした

ならJavaScriptでブラウザごとに別処理してるしかない！ということで ブラウザ情報取得してるところを検索してみます
すると ブラウザバージョンを取得してるところがありました
とりあえずブレイクポイントつけて一端止めてChromeと同じバージョンで上書きしてみます
その結果…… 変わりませんでした


ただのJavaScriptで書かれているとステップ実行で簡単に流れを追えるのですが jQueryを使ってるせいで動きがわかりづらすぎです
コード内のあちこち飛びまくりですし each の中に移動したい時も関数の中の1行目にブレイクポイント置いて 次のブレイクポイントへジャンプというようにしないとjQueryの内部のいらないコードをずっと見ることになります

ホンット jQuery嫌い

みんな関数追加やプロトタイプ拡張系のライブラリ使えばいいのに

必殺技！コード書き換えて原因探してみる

今回はブラウザ側だけで起きてる問題でソースも絶対パスで書かれているというラッキーなケース
htmlファイルをダウンロードして ソースを書き換えて動きを確認できます

とりあえずこれでいろいろ削りながら 問題なく動くChromeで削ると動かなくなる場所を探します
そして最低限あれば動くところだけを残します

今回使われていたプレーヤーは jPlayerというもので jQueryのプラグインでした
必要なのはjQueryとjPlayerのライブラリです
どれもminifyされているのでChromeの開発者ツールで整形しても見づらかったです

プレーヤーなので ライブラリ外のコードは初期化（使う音楽の情報をセットしてる）だけで ページロード後やクリックしたときに動作する部分もライブラリ側で処理を書いているので結局ライブラリ部分まで読むことになりました
クリックイベントが何してるかをステップ実行するのですらjQueryのせいでライブラリ外のところに辿り着くまでが大変です

奥義！！困ったときはとりあえずステップ実行

再生もできないアイコンもでないで どこを見たらいいのかもよくわからないので とりあえずアイコンが出ない原因を調べます
ステップ実行でステップインを何百回とクリックしながらちゃんと動くChromeの方でどのタイミングで変わるかを確認
動かないChromodoでは変数がどうなってるかを逐次確認します


……ここで数時間……


$(selector).jPlayer() の引数に"setMedia"があると再生するものを切り替えて "play"があると今セットされているのを再生するようです

とりあえず 画像が表示されない理由を調べるためにsetMediaを見てみます

原因発見！

メソッドでは プレーヤーが対応しているフォーマット[fla,flv,m4a,m4v,mp3,oga,ogv,webma,webm]の中から今再生しようとしているのに対して html→flashの順でサポートしているかを確認してサポートしていればセットする準備？をしてるようです
後ろの方にセットしそうなコードがありました

他にも色々ありますが関係なさそうなところはちゃんと読んでないのでわからないです

このサポートしてるかですがChromeとChromodoで違ってました


Support

[HTML]

	Chrome	Chromodo
ogv	true	true
m4v	true	false
oga	true	true
mp3	true	false

[Flash]

	Chrome	Chromodo
ogv	false	false
m4v	false	false
oga	false	false
mp3	false	false

Chromodoでは mp3とm4vは再生できないみたいです
他のフォーマットはリストにはあるものの サポートの情報は入ってませんでした

FlashはChromeでも全部falseになってました

Support以外にも canPlay つまりサポートは置いておいて再生することはできるか というプロパティもありました
こっちは

canplay

[HTML]

	Chrome	Chromodo
ogv	true	true
m4v	true	false
oga	true	true
mp3	true	false

[Flash]

	Chrome	Chromodo
ogv	false	false
m4v	true	true
oga	false	false
mp3	true	true

HTMLはサポートと一緒ですが Flashはmp3とm4vは再生可能なようです
ですが サポートはfalseにされていてFlashで再生しないようにされています

今回サイトにあったのはmp3なので このせいでChromodoではHTMLでもFlashでも再生できないのであんなことになってた ということです


Chromodoで開けないのが意外だったので 直接mp3のURLを開いてみると Chromeではブラウザ内で再生が始まりましたが Chromodoではダウンロードになってしまいました

そういえば ChromiumはChromeからFlashやその他権利関係でどうこうあるものが入ってない版と聞いたことがあります
ChromodoもChromiumと同じ構成ということみたいですね

---

こんなことをしていたら半日もかかっていました
もっと効率的にそして楽に見つける方法はないものなんでしょうか

こんなプレーヤーじゃなくて「単純にmp3のURLを入力した時にChromodoだとダウンロードされる」というのならこんなに迷わずに済んだのに 無駄にjQueryやjQueryプラグインのソースコードを読むことになってしまいました
実際はjQueryとかは全く原因に関係なくて ブラウザに再生機能がなかったなんて……

見つけるまでも大変でしたが 実はまとめてブログ書くほうが大変だったりします
気持ち的に