HTML5 音频 - 为什么不在 iOS 上工作？（不涉及自动播放）答案

【问题标题】：HTML5 Audio - Why not working on iOS? (NO autoplay involved)HTML5 音频 - 为什么不在 iOS 上工作？（不涉及自动播放）
【发布时间】：2016-01-26 18:02:43
【问题描述】：

我构建了一个简单的演示应用程序来测试 HTML5-Audio。当您触摸或单击机器人的头部时，webapp 说“eins”，这是德语中“one”的意思（我的电脑上有这个声音文件用于测试）。

您可以在此处测试演示应用：http://jstesproject.cwsurf.de/

(备注：机器人是 phonegap 图标，但不涉及 phonegap 或 cordova 技术。它是纯 HTML5、Javascript (+jQuery) 和 CSS。另外，你已经手动点击了机器人的头部，所以不涉及自动启动。）

webapp 在桌面浏览器（我测试过 Chrome 和 Firefox）和 Android 原生浏览器（我用 Android 4.0 测试过）上运行良好。但是，我无法让它在 iOS 下工作（iPhone，Chrome 和 Safari 都不是）。 Audio-Object 抛出错误（代码 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>

【问题讨论】：

就我使用 html5 音频而言，我在 iOS 上也遇到了问题——它有很多限制；即使使用专用的声音库，iOS 也存在限制 - 有时您无法更改音量，有时您无法在播放时暂停音频等。就我而言，我让它与其中一个库一起工作（但使用的是 Cordova 和 Phonegap Build）全部。不要忘记检查编解码器（ogg/mp3...）。检查此以获取更多信息ibm.com/developerworks/library/wa-ioshtml5

标签： javascript jquery html mobile html5-audio

【解决方案1】：

将调用移至“canplay”事件侦听器之外的audio.play()。要在移动设备上播放音频/视频，您需要来自用户的直接、物理和同步交互。您确定了前两个，但是当您将 audio.play() 放在事件侦听器中时，您打破了同步要求。

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

// AFTER
audio.play();

【讨论】：

先生，您是救生员！！！非常感谢，它有效。另外，很好的解释为什么会这样！