Skip to content

Instantly share code, notes, and snippets.

@pacochi
Last active February 12, 2017 12:59
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save pacochi/72fead25eebf75e3d750fe43a47c496b to your computer and use it in GitHub Desktop.
Save pacochi/72fead25eebf75e3d750fe43a47c496b to your computer and use it in GitHub Desktop.
はてなブログで [http://~.mp3:sound] と書いた時に出るプレイヤーを優しくします。
(function() {
// モバイル端末で viewport がいい具合に設定されてないと FastClick が発動して AUDIO 要素をタップできなくなる
if (!document.querySelector('meta[name="viewport"]')) {
var viewport = document.createElement('meta');
viewport.setAttribute('name', 'viewport');
viewport.setAttribute('content', 'width=device-width,initial-scale=1.0');
document.querySelector('head').appendChild(viewport);
}
// ID が「mp3_3」固定だった…
Array.prototype.forEach.call(document.querySelectorAll('object[id="mp3_3"]'), function (mp3Player) {
var mp3Parent = mp3Player.parentNode;
var mp3Audio = new Audio();
mp3Audio.controls = true;
mp3Audio.preload = 'none';
mp3Audio.src = mp3Player.querySelector('param[name="flashVars"]').getAttribute('value').substr(7);
mp3Audio.style.width = mp3Player.width + 'px';
mp3Audio.style.height = mp3Player.height + 'px';
mp3Parent.removeChild(mp3Player);
mp3Player = mp3Player.cloneNode(true);
mp3Player.removeAttribute('codebase');
mp3Player.removeAttribute('classid');
mp3Player.removeAttribute('id');
mp3Player.removeChild(mp3Player.querySelector('embed'));
mp3Player.setAttribute('data', mp3Player.querySelector('param[name="movie"]').getAttribute('value'));
mp3Player.setAttribute('type', 'application/x-shockwave-flash');
mp3Player.appendChild(mp3Audio);
mp3Parent.insertBefore(mp3Player, mp3Parent.firstChild);
});
})();
@pacochi
Copy link
Author

pacochi commented Feb 7, 2017

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

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

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment