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

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 puter for testing).

You can test the demo app here: /

(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>

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 puter for testing).

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

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>

Share Improve this question edited Jan 26, 2016 at 10:02 mfathy00 1,6111 gold badge14 silver badges28 bronze badges asked Jul 29, 2014 at 19:13 Christian 1,5861 gold badge22 silver badges36 bronze badges

as far as I played around with html5 audio I had issues with iOS as well - it has lots of limitations; even with dedicated sound libraries there are limits on iOS - sometimes you cant change volume, other times you cant pause audio while playing etc. For my case I got it to work (but was using Cordova & Phonegap Build) with one of the libraries after all. Don't forget to check the codec (ogg/mp3...). Check this for more info ibm./developerworks/library/wa-ioshtml5 – trainoasis Commented Jul 29, 2014 at 20:04

Add a ment |

1 Answer 1

Sorted by: Reset to default 12

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();

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

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

1 Answer 1

与本文相关的文章

评论列表(0)