Javascript音頻無法在iOS上與React和Socket.io一起正常使用

Question

我正在創建一個使用React和Socket.io的簡單Web應用程序。 原理是有兩個連接的設備，除了“轉到此視圖”類型的消息外，彼此之間不發送其他任何消息，然后對這些消息做出反應就可以了。

我的問題是在視圖更改時使用javascript播放音頻剪輯。 當我單擊更改視圖的iPad上的按鈕時，音頻開始正常播放，但是當通過Websocket連接的另一設備啟動視圖更改時，音頻將無法播放。

所有這些在Chrome和Safari桌面上都可以正常工作。 這不適用於運行iOS 9.3.5的iPad或運行iOs 11.0.1的iPhone（已測試野生動物園和Chrome）

這是播放音頻文件的代碼：

// Importing audio files
import responsePromptSound from 'A/responsePrompt.aac';
import endsound from 'A/endsound.aac';

function playSound(view) {
  // Stop playing a repeating sound if there is one
  if (window.soundPlaying) {
    clearInterval(window.soundPlaying);
  }

  // The audio clips to be used in each view
  const views = {
    start: null,
    waitingForResponse: null,
    responsePrompt: responsePromptSound,
    end: endsound,
  };

  // Current audio clip
  const soundClip = views[view];

  if (!soundClip) {
    return;
  }

  const audio = new Audio(soundClip);

  function playMe() {
    audio.play();
  }

  // Repeating notification sound
  if (view === 'responsePrompt') {
    window.soundPlaying = setInterval(() => {
      playMe();
    }, 7 * 1000);
  }

  // Play always at least once
  playMe();
}

export default playSound;

這是渲染按鈕的代碼，該按鈕也調用playSound ：

import React from 'react';
import PropTypes from 'prop-types';

import playSound from 'C/Audio.js';

function Button(props) {
  // text content for each view
  const views = {
    start: ['start1', 'start2'],
    waitingForResponse: null,
    responsePrompt: ['prompt1', 'prompt2'],
    end: ['end1', 'end2'],
  };

  // Current button text
  const btnText = views[props.view];

  let btn;

  // Different views for button
  if (!btnText) {
    btn = null;
  } else if (props.view === 'end') {
    btn = (
      <div className="end-box">
        <div className="end-box-inner">

          <div className="button-txt-one">{btnText[0]}</div>
          <div className="line" />
          <div className="button-txt-two">{btnText[1]}</div>

        </div>
      </div>
    );
  } else {
    btn = (
      <button onClick={props.changeView}>
        <div className="button-inner">
          <span>

            <div className="button-txt-one">{btnText[0]}</div>
            <div className="line" />
            <div className="button-txt-two">{btnText[1]}</div>

          </span>
        </div>
      </button>
    );
  }

  playSound(props.view);

  return (
    btn
  );
}

Button.propTypes = {
  view: PropTypes.string.isRequired,
  changeView: PropTypes.func.isRequired,
};

export default Button;

套接字連接僅使用正確的view觸發父元素上的setState() 。

編輯：忘了補充說，我也嘗試在主元素上使用MutationObserver並打開所有內容，但仍然一無所獲。

附言 我知道大約有十億件事在這里做得不好，請忍受我。

Answer 1

我發現這篇文章描述了iOS上HTML5音頻的局限性。 與此問題相關，在iOS上，必須始終通過用戶操作來啟動音頻的播放，唯一的解決方案是以用戶始終啟動播放的方式設計應用。

我將研究一些可能的解決方法，並盡快編輯我的答案以包括我的發現，即使至少根據本文而言，沒有解決方法。 雖然是2012年，所以可能會有一些變化。