http 記法の :sound オプションを使い続けたい

はてな記法のひとつである http 記法には :sound というオプションがあります。

そのURLが「.mp3」で終わるmp3ファイルを示している場合、「:sound」と記述すると再生プレーヤーを表示します

リンクを簡単に記述する（http記法、mailto記法） - はてなダイアリーのヘルプ

メロディ記法と違ってはてなブログでもこの再生プレイヤーが利用できるのですが、Flash なので限られた環境でしか再生できません。

以前別のブログで「じゃあ audio タグで囲っとこっか」と思い、該当の記法部分を audio タグで挟んだところ、ダウンロードリンクまで挟みこんでしまい不便になってしまいました。

あと個人的にはてなプレイヤーの外観がはてなっぽくて好きなので、やっぱりできる限りこっちを表示させたいなと思いました。

そこで「じゃあはてな記法展開後に audio 要素を object の中に滑り込ませるのが正解かな」と思い直し、そういうスクリプトを書きました。

はてなブログで [http://～.mp3:sound] と書いた時に出るプレイヤーを優しくするもの

mp3 プレイヤーを使った記事の最後に以下のコードを貼り付けると、ちょっとアクセシビリティが上がるかもしれません。

（はてな記法での書き方なので、別の編集方法を採用している場合は別途読み替えてください。）

><script type="text/javascript" src="https://cdn.rawgit.com/pacochi/72fead25eebf75e3d750fe43a47c496b/raw/hb_mp3_audio.js"></script><

ここに動作確認用サンプルを書いておきます。

この記事用に音源を作る時間が割けなかったので、昔色々あってお蔵入りした音源の一部を使いました。ライセンスのゆるさを基準にしてチョイスしました。フル音源および歌詞とその訳は SoundCloud にあります。

viewport が設定されていないか特殊な設定だと、hatenablog.js の document.documentElement.scrollWidth <= window.outerWidth に引っかかって FastClick が発動して audio 要素のコントロールが操作不能になるので、viewport を設定していない場合は勝手に付け足します。特殊な設定で操作不能になる場合はご自身でコードを書き換えてご利用ください。