HTML5のaudio要素をJavaScriptで操作するコードを書いていて、Windows版ChromeとiOS版Safariではまったのでメモ。

こんな感じのコード

function play(myid) {
  var audio = $('#aud_' + myid)[0];
  if (!audio)
  {
    audio = $('#aud_' + myid)[1];
  }
  if (!audio)
  {
    return false;
  }

  audio.addEventListener("ended", function() {
    $('#img_' + myid).attr('src','/wp/misc/standby.png');
  }, false);
  
  $('#img_' + myid).attr('src','/wp/misc/playing.gif');
  audio.play();

  return false;
}

一度再生させたaudio要素を、再びこの関数を使って再生させようとしても、音が鳴らない。

デバッグしてみると、currentTimeが末尾のままになっている様子。

ということで、再生前にcurrentTime = 0;を入れてみても、もう元には戻らない…

無職のプログラミングさんの記事を参考に、audio.load();を入れてみたところ、無事に再再生ができるように。

function play(myid) {
  var audio = $('#aud_' + myid)[0];
  if (!audio)
  {
    audio = $('#aud_' + myid)[1];
  }
  if (!audio)
  {
    return false;
  }
  
  audio.addEventListener("ended", function() {
    audio.load(); // 既に再生済みの音声がもう一度クリックされる時のための処理	
    $('#img_' + myid).attr('src','/wp/misc/standby.png');
  }, false);
  
  $('#img_' + myid).attr('src','/wp/misc/playing.gif');
  audio.play();

  return false;
}