个人中心
gpt4 book ai didi

javascript - HTML5 音频 - 为什么不在 iOS 上工作？ (不涉及自动播放)

转载 作者：太空宇宙 更新时间：2023-11-04 14:16:29 25 4
gpt4 key购买 nike

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

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

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

Web 应用程序在桌面浏览器(我测试过 Chrome 和 Firefox)和 Android 原生浏览器(我用 Android 4.0 测试过)上运行良好。但是，我无法让它在 iOS(iPhone、Chrome 和 Safari)下运行。音频对象抛出错误(代码 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>

最佳答案

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

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

// AFTER
audio.play();

关于javascript - HTML5 音频 - 为什么不在 iOS 上工作？ (不涉及自动播放)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25023211/

25 4 0
文章推荐： c++ - 在带有非 ASCII 注释的 C++ 代码中查找非 ASCII 字符的出现
文章推荐： java - 用于多个 EditText 的多个自定义键盘
文章推荐： c++ - 是否可以使用 gtkmm 定义 GTK+ 类型？
文章推荐： java - Jooq 使用现有连接进行 fetchOne 或执行
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com