HTML5音频 - 为什么在iOS上不工作？（没有自动播放）

Question

HTML5音频 - 为什么在iOS上不工作？（没有自动播放）

4

我制作了一个简单的演示应用程序来测试HTML5-Audio。当您触摸或点击机器人的头部时，Web应用程序会说“eins”，这是德语中的“one”（我在计算机上有这个音频文件进行测试）。

您可以在此处测试演示应用程序：http://jstesproject.cwsurf.de/ （备注：机器人是phonegap图标，但没有涉及任何phonegap或cordova技术。它是纯HTML5、Javascript (+jQuery)和CSS。此外，您必须手动单击机器人的头部，因此没有自动启动。）

该Web应用程序在桌面浏览器上工作正常（我在Chrome和Firefox上进行了测试），并且在Android本机浏览器上也能正常工作（我在Android 4.0上进行了测试）。但是，我无法使其在iOS下工作（iPhone，Chrome和Safari皆如此）。Audio对象抛出错误（代码4）。

为什么会这样？我该如何在iOS下使其工作？其中没有自动启动。请参见我的代码：

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

- Christian

就我个人使用HTML5音频的经验而言，我在iOS上遇到了很多问题，因为它有很多限制。即使使用专门的声音库，在iOS上也存在一些限制，有时候你无法更改音量，有时候你无法在播放时暂停音频等等。对于我的情况，最终我使用Cordova和Phonegap Build中的一个库解决了这个问题。别忘了检查编解码器（ogg/mp3...）。请参考此链接获取更多信息http://www.ibm.com/developerworks/library/wa-ioshtml5/。 - trainoasis

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- idbehold · Accepted Answer

将audio.play()的调用移到“canplay”事件侦听器之外。在移动设备上播放音频/视频需要用户直接、物理和同步交互。您已经掌握了前两者，但是当您将audio.play()放在事件侦听器内时，破坏了同步要求。

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

// AFTER
audio.play();