HTML5 Audio - Why not working on iOS? (NO autoplay involved)

javascript jquery html mobile html5-audio

13,303

Move the call to audio.play() outside the "canplay" event listener. To play audio/video on mobile devices you need direct, physical and synchronous interaction from the user. You nailed the first two, but when you put that audio.play() inside the event listener you break the synchronous requirement.

// BEFORE
audio.addEventListener('canplay', function() {
    audio.play();
});

// AFTER
audio.play();

13,303

Author by

Christian

Updated on June 04, 2022

Comments

Christian almost 2 years

I built a simple demo app to test HTML5-Audio. When you touch or click the robot's head the webapp says "eins", which is german for "one" (I had this soundfile on my computer for testing).

You can test the demo app here: http://jstesproject.cwsurf.de/

(Remarks: The robot is the phonegap icon, but there is NO phonegap or cordova technology involved. It is plain HTML5, Javascript (+jQuery) and CSS. Also, you have manually click the robot's head, so there is NO autostart involved.)

The webapp works fine on desktop browsers (I tested Chrome and Firefox) and on Android native browser (I tested with Android 4.0). However, I cannot get it to work under iOS (iPhone, neither Chrome nor Safari). The Audio-Object throws an error (code 4).

Why is this? How can I get it to work under iOS? There is no autostart involved. Please see my code below:

Code

$(document).ready(function() {
  clearLog();

  log('Document ready!');

  $('.clickable').click(function() {
    var value = $(this).html();

    playAudio('res/audio/', '1.wav');
  });
});

//==============
// AUDIO
function playAudio(path, src) {
  log('playAudio called! Arguments: ' + path + ', ' + src);

  $('#path').html('path -> ' + path);
  $('#file').html('file -> ' + path + src);

  if (typeof Audio != "undefined") {
    log('Playing Audio using HTML5...');

    var audioUrl = path + src;
    log('audioUrl: ' + audioUrl);

    var audio = new Audio();
    audio.src = audioUrl;
    audio.type = 'audio/x-wav';

    audio.addEventListener('error', function() {
      log('Audio error: ' + audioUrl + '; ' + JSON.stringify(audio.error));
      $('#audioStatus').html('Audio error: ' + audioUrl + '; ' + JSON.stringify(audio.error));
    });

    audio.addEventListener('play', function() {
      log('Starting audio: ' + audioUrl + '; MIME-type: ' + audio.type);
      $('#audioStatus').html('Playing audio: ' + audioUrl);
    });

    audio.addEventListener('ended', function() {
      log('Playback ended: ' + audioUrl);
      $('#audioStatus').html('Stopped...');
    });

    audio.addEventListener('canplay', function() {
      audio.play();
    });
  } else {
    log('Cannot play audio via HTML5 -> !(typeof Audio != "undefined")');
  }
}

//==============
// UTILS
function log(s, showAlert) {
  var now = new Date();
  var text = makeTwoDigits(now.getHours()) + ':' + makeTwoDigits(now.getMinutes()) + ':' + makeTwoDigits(now.getSeconds()) + ' >> ' + s;

  $('#console').append('<p>' + text + '</p>');
  console.log(text);

  if (showAlert) {
    alert(text);
  }
}

function clearLog() {
  $('#console').html('<p><strong>Console</strong> <span>[clear]</span></p>');

  $('#console span').click(function() {
    clearLog();
  });
}

function makeTwoDigits(x) {
  if (x < 10) {
    return '0' + x;
  } else {
    return '' + x;
  }
}

 {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
 }
 body {
   overflow-y: scroll;
   background-color: #EEE;
 }
 .clickable {
   cursor: pointer;
 }
 .icon {
   text-align: center;
 }
 .app {
   width: 256px;
   height: auto;
   margin: 50px auto;
   padding: 20px;
   background: linear-gradient(#9dd2ea, #8bceec);
   border-radius: 10px;
 }
 .numbers,
 .display {
   overflow: hidden;
 }
 .app .numbers span {
   float: left;
   width: 50px;
   height: 50px;
   background: white;
   border-radius: 10px;
   padding: 10px;
   margin: 10px;
   line-height: 32px;
   text-align: center;
   cursor: pointer;
 }
 .app .display span {
   float: left;
   width: 190px;
   height: 50px;
   background: grey;
   color: white;
   border-radius: 10px;
   padding: 10px;
   margin: 10px;
   line-height: 32px;
   text-align: center;
   cursor: pointer;
 }
 .app .debug {
   text-align: center;
   margin-top: 10px;
 }
 #console {
   width: 80%;
   margin: 20px auto;
   padding: 20px;
   background: linear-gradient(#9dd2ea, #00d3ec);
   border-radius: 10px;
 }
 #console p {
   margin: 10px 0px;
 }
 #console span {
   float: right;
   cursor: pointer;
 }

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <link rel="stylesheet" type="text/css" href="css/index.css" />
  <title>I can say one!</title>
</head>

<body>
  <div class="app">
    <div class="clickable icon">CLICK MY ROBOT-HEAD!</div>
    <div class="clickable icon">
      <img src="icon.png" />
    </div>

    <div class="debug">Info:</div>
    <div id="path" class="debug">N/A</div>
    <div id="file" class="debug">N/A</div>
    <div id="audioStatus" class="debug">N/A</div>
  </div>

  <div id="console">
    <p><strong>Console</strong>  <span>[clear]</span>
    </p>
  </div>

  <script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>
  <script src="js/prefixfree-1.0.7.js" type="text/javascript"></script>
  <script src="js/index.js" type="text/javascript"></script>
</body>

</html>