読者です 読者をやめる 読者になる 読者になる

norinyang メガ進化!

気ままに色々

audioタグを使うときの注意

最近Webサービス自分で作ろうと思ってこそこそ色々してるんだけど
audioタグを使ったらすごくレスポンスが悪くなったので備忘録
ちなみに、audioタグを50個とか並べたときの話です。1つとかなら気にしなくて大丈夫

起こった事

最近は僕のようなデザインなんて全く分からない人間でもなんとかなるようにいろんなテンプレートがあるのでそれを使ってレスポンシブルなサイトを作っていた
確認端末は

基本的にはMBP Chromeで確認しながらつくって、携帯端末でも追加で確認という感じ

audioタグで音が再生できるようになったのでいざiPhoneで確認してみるとレスポンスがが返ってこない
サーバ側の応答を確認してみると即座に返しているように見える
ただ、jsやcssが読み込まれにくるのがやたらと遅い

ドキュメントを返してから、そのドキュメント内で呼ばれているファイルを取得する迄30秒近くかかってしまっている

しかも遅いだけならまだしも、Safariが操作不能な状態に陥ってあげくクラッシュしおる。。。
まぁ、もうすぐiPhone6が出ようかというときに5で検証してるのでスペックの話はあるんだけど、いくらなんでもひどすぎる

考えられそうな事

  • jsのイベント登録が遅い
    • js読まれる前段階がすごく遅いので関係なさそう
  • 画像の量が多すぎて読み込みが遅い

— audioタグつける前は許容範囲に収まっていた

  • やっぱaudioタグ?

まぁ、考えてみるとやっぱaudioタグ怪しいよね!って事で

色々やってみる

  • preload=“none” を試してみた
  • srcの中身を空にしてみた
  • audioタグを全部消してみた

audio タグ消す意外の方法は全く効果がなかった。。。
どういうこっちゃねん。。。

しゃーないのでごにょごにょしてみた

htmlの中にaudioタグを埋め込むのは諦めて、Javascript使ってどうにかします

<span class="track-preview" data-track-id="912271090">
  <i class="start-track-preview icon-play" data-preview-src="http://a625.phobos.apple.com/us/r30/Music4/v4/4d/3e/6c/4d3e6c6d-8a55-6a24-8b20-881a20c2d0cb/mzaf_4364382391745539868.plus.aac.p.m4a"></i>
  <i class="stop-track-preview icon-pause" style="display:none"></i>                  
   誰でもロンリー
</span>
<span class="track-preview" data-track-id=...
<span class="track-preview" data-track-id=...
<span class="track-preview" data-track-id=...
( function () {
  audio = document.createElement("audio");
  trackId = undefined;
  $('.start-track-preview').each( function (index, value) {
    $(value).on('click', function (event) {
      var trackPreview = $(value).closest('.track-preview');
      trackPreview.find('.stop-track-preview').show();
      $(value).hide();
      previewSrc = $(value).attr('data-preview-src');
      if (previewSrc !== $(audio).attr('src')) {
          if (trackId !== undefined) {
            audio.pause()
            $('.track-preview[data-track-id=' + trackId + ']').each( function (index, target) {
                $(target).find('.stop-track-preview').hide();
                $(target).find('.start-track-preview').show();
            })
          }
          $(audio).attr('src', previewSrc);
      }
      audio.play()
      trackId = $(trackPreview).attr('data-track-id')
    });
  });
  $('.stop-track-preview').each( function (index, value) {
    $(value).on('click', function (event) {
      var trackPreview = $(value).closest('.track-preview');
      trackPreview.find('.start-track-preview').show();
      $(value).hide();
      audio.pause()
      trackId = undefined;
    });
  });
} ) ();

あらかじめAdioElementをJavascript内に用意しておいてそのsrc属性を入れ替えて音声を再生したり、停止したりしています
ちょっと雑な方法だけどとりあえずコレでレスポンスに関しては解決した

まとめ

audioタグがあるだけで何かiPhone Safariさんはなんかするんかね?
教えて偉い人!
Mac Safari だとどうなるか調べてないけどダメなんかね?
(自分でやれってかんじですね
そもそもaudioタグ並べるなって話もあるかもしれない
つらみある
Videoタグだってにたような感じになるんかね?