移动iOS的音频问题

我正在使用React开发呼吸应用程序。我的应用程序在所有桌面浏览器和安卓设备上都能正常工作，但在移动iOS上不行，在这种情况下，主呼吸功能的音频根本无法播放

这是奇怪的部分。它将为应用程序的其他部分播放音频。有一个介绍，和一个教程，这两个播放各自的音频正如他们应该的。但是主要的呼吸功能没有

以下是介绍的一个示例：

import React, { FC, useState, useEffect } from 'react';
import { useStyles } from './styles';
import { ButtonBar, Header } from 'components';
import IntroContent from './Intro-content';
import { createAudio, playAudio } from 'dha-assets';
import intro_female from '../../assets/audio/Female/intro_female.mp3';
import intro_male from '../../assets/audio/Male/intro_male.mp3';
import { useSelector } from 'react-redux';
import Logo from '../../assets/images/Logo.svg';
import { Redirect } from 'react-router-dom';

interface State {
  gender: string;
}

createAudio('intro_female', intro_female);
createAudio('intro_male', intro_male);

const playFemaleIntro = () => {
  playAudio('intro_female');
};

const playMaleIntro = () => {
  playAudio('intro_male');
};

const Intro: FC = () => {
  const classes = useStyles();
  const gender = useSelector<State>((state) => state.gender);
  const [paragraphs] = useState(IntroContent.intro.paragraphs);
  const [displayParagraph, setDisplayParagraph] = useState('');
  const [index, setIndex] = useState(0);

  if (gender === 'female') {
    playFemaleIntro();
  } else {
    playMaleIntro();
  }

  const timeoutDelays = [0, 5000, 3700, 5700, 4900, 7500, 9000, 6700, 6700, 8000];

  useEffect(() => {
    const changeParagraph = () => {
      setDisplayParagraph(paragraphs[index]);
      setIndex(index + 1);
    };
    setTimeout(changeParagraph, timeoutDelays[index]);
  }, [index]);

  return (
    <>
      <Header />
      {index >= 10 ? <Redirect to="/home" /> : null}
      <div className={classes.root}>
        <div className={classes.img}>
          <img src={Logo} alt="TB Logo" />
        </div>
        <div className={classes.paragraph}>
          <p>{displayParagraph}</p>
        </div>
        <div className={classes.buttonBar}>
          <ButtonBar />
        </div>
      </div>
    </>
  );
};

export default Intro;

从“React”导入React，{FC，useState，useffect}；
从“./styles”导入{useStyles}；
从“组件”导入{ButtonBar，Header}；
从“./Intro content”导入简介内容；
从“dha资产”导入{createAudio，playAudio}；
从“../assets/audio/female/intro_female.mp3”导入intro_female；
从“../../assets/audio/male/intro_male.mp3”导入简介；
从'react redux'导入{useSelector}；
从“../../assets/images/Logo.svg”导入徽标；
从'react router dom'导入{Redirect}；
界面状态{
性别：弦；
}
createAudio（“女简介”，女简介）；
createAudio（“简介男”，简介男）；
const playFemaleIntro=（）=>{
播放音频（“介绍女性”）；
};
const playmelintro=（）=>{
playAudio（“男性介绍”）；
};
常量介绍：FC=（）=>{
const classes=useStyles（）；
const-gender=useSelector（（state）=>state.gender）；
常量[段落]=使用状态（IntroContent.intro.pages）；
const[display段落，setdisplay段落]=useState（“”）；
const[index，setIndex]=useState（0）；
如果（性别==‘女性’）{
playFemaleIntro（）；
}否则{
playMaleIntro（）；
}
const timeoutDelays=[0,5000,3700,5700,4900,7500,9000,6700,6700,8000]；
useffect（（）=>{
常量更改段落=（）=>{
设置显示段落（段落[索引]）；
setIndex（index+1）；
};
setTimeout（更改段落，timeoutDelays[索引]）；
}，[指数]；
返回(
{index>=10？：null}
{显示段落}

);
};
导出默认简介；

这是呼吸功能：

import React, { FC } from 'react';
import { useStyles } from './styles';
import { ButtonBar, Header } from 'components';
import BreatheCircles from './BreatheCircles';

const Breathe: FC = () => {
  const classes = useStyles();

  return (
    <>
      <Header />
      <div className={classes.root}>
        <div className={classes.circles}>
          <BreatheCircles />
        </div>
        <div className={classes.buttonBar}>
          <ButtonBar />
        </div>
      </div>
    </>
  );
};

export default Breathe;

import React, { FC } from 'react';
import { useStyles } from './styles';
import { ButtonBar, Header } from 'components';
import BreatheCircles from './BreatheCircles';
import { audioFiles, createAudio } from 'dha-assets';
import { State } from 'containers/Tutorial/Tutorial';
import { useSelector } from 'react-redux';
import breathe_female from '../../assets/audio/Female/breathe_female.mp3';
import breathe_male from '../../assets/audio/Male/breathe_male.mp3';

createAudio('breathe_female', breathe_female);
createAudio('breathe_male', breathe_male);

const Breathe: FC = () => {
  const classes = useStyles();
  const gender = useSelector<State>((state) => state.gender);

  if (gender !== 'mute') {
    audioFiles[`breathe_${gender}`].play();
    audioFiles[`breathe_${gender}`].loop = true;
  }

  return (
    <>
      <Header />
      <div className={classes.root}>
        <div className={classes.circles}>
          <BreatheCircles />
        </div>
        <div className={classes.buttonBar}>
          <ButtonBar />
        </div>
      </div>
    </>
  );
};

export default Breathe;

从“React”导入React，{FC}；
从“./styles”导入{useStyles}；
从“组件”导入{ButtonBar，Header}；
从“/呼吸循环”导入呼吸循环；
常数呼吸：FC=（）=>{
const classes=useStyles（）；
返回(
);
};
出口违约；

呼吸循环使用setInterval按顺序旋转不同的循环，它们的设置基本相同。以下是其中一个圆圈：

import React, { Component, FC } from 'react';
import { useStyles } from './styles';
import Counter from 'components/Counter/Counter';
import { State } from 'containers/Tutorial/Tutorial';
import { playAudio } from 'dha-assets';
import { useSelector } from 'react-redux';

const playFemaleInhale = () => {
  playAudio('inhale_female');
}
const playMaleInhale = () => {
  playAudio('inhale_male');
}

const InCircle: FC = () => {
  const classes = useStyles();
  const gender = useSelector<State>((state) => state.gender);

  if (gender === 'female') {
    playFemaleInhale();
  } else if (gender === 'male') {
    playMaleInhale();
  }
  
  return (
    <>
      <div className={classes.circleBreatheIn} />
      <div className={classes.text}>
        Inhale
      </div>
    </>
  );
};

// This is a wrapper class for the FC above. The animaations work better with the class.
class BreatheInCircle extends Component {
  render() {
    return (
      <>
        <InCircle />
        <div style={{ color: '#000' }}>
          <Counter />
        </div>
      </>
    );
  }
}

export default BreatheInCircle;

从'React'导入React，{Component，FC}；
从“./styles”导入{useStyles}；
从“组件/计数器/计数器”导入计数器；
从“containers/Tutorial/Tutorial”导入{State}；
从“dha资产”导入{playAudio}；
从'react redux'导入{useSelector}；
const PlayFemaleInosit=（）=>{
播放音频（“吸入女性”）；
}
const playmalenosis=（）=>{
播放音频（“吸入男性”）；
}
循环常数：FC=（）=>{
const classes=useStyles（）；
const-gender=useSelector（（state）=>state.gender）；
如果（性别==‘女性’）{
PlayFemale吸入（）；
}否则，如果（性别==‘男性’）{
playmalehosis（）；
}
返回(
吸入
);
};
//这是上述FC的包装器类。动画在课堂上表现得更好。
类呼吸圈扩展组件{
render（）{
返回(
);
}
}
导出默认呼吸圈；

以下是我到目前为止的想法，iOS自动播放被禁用。但如果是这样，介绍和教程也不会播放。所以我认为这不可能

对于那些想了解dha资产的人，它会在创建音频文件时维护它们的地图。然后，您可以从该单一贴图播放、暂停和停止（这就是在呼吸卷曲中播放音频文件的方式）。我确实尝试过在圆圈中创建音频文件，但是没有什么不同

---

请让我知道，如果我需要更清楚。我很乐意回答您的任何问题。

我知道我在回答我自己的问题，但我确实解决了这个问题。最后我把所有的音频文件合并成一个文件，一个是女声，一个是男声，然后直接在呼吸文件中播放

我仍在寻找更好的解决方案。如果有人找到了，请把它寄出去

我不认为我现在的方式是最有效的方式，我希望我的代码尽可能的高效和干净

以下是最终呼吸功能的代码：

import React, { FC } from 'react';
import { useStyles } from './styles';
import { ButtonBar, Header } from 'components';
import BreatheCircles from './BreatheCircles';

const Breathe: FC = () => {
  const classes = useStyles();

  return (
    <>
      <Header />
      <div className={classes.root}>
        <div className={classes.circles}>
          <BreatheCircles />
        </div>
        <div className={classes.buttonBar}>
          <ButtonBar />
        </div>
      </div>
    </>
  );
};

export default Breathe;

import React, { FC } from 'react';
import { useStyles } from './styles';
import { ButtonBar, Header } from 'components';
import BreatheCircles from './BreatheCircles';
import { audioFiles, createAudio } from 'dha-assets';
import { State } from 'containers/Tutorial/Tutorial';
import { useSelector } from 'react-redux';
import breathe_female from '../../assets/audio/Female/breathe_female.mp3';
import breathe_male from '../../assets/audio/Male/breathe_male.mp3';

createAudio('breathe_female', breathe_female);
createAudio('breathe_male', breathe_male);

const Breathe: FC = () => {
  const classes = useStyles();
  const gender = useSelector<State>((state) => state.gender);

  if (gender !== 'mute') {
    audioFiles[`breathe_${gender}`].play();
    audioFiles[`breathe_${gender}`].loop = true;
  }

  return (
    <>
      <Header />
      <div className={classes.root}>
        <div className={classes.circles}>
          <BreatheCircles />
        </div>
        <div className={classes.buttonBar}>
          <ButtonBar />
        </div>
      </div>
    </>
  );
};

export default Breathe;

从“React”导入React，{FC}；
从“./styles”导入{useStyles}；
从“组件”导入{ButtonBar，Header}；
从“/呼吸循环”导入呼吸循环；
从“dha资产”导入{audioFiles，createAudio}；
从“containers/Tutorial/Tutorial”导入{State}；
从'react redux'导入{useSelector}；
从“../../assets/audio/female/breathe_female.mp3”导入breathe_female；
从“../../assets/audio/male/breathe_-male.mp3”导入breathe_-male；
createAudio（“呼吸女性”，呼吸女性）；
createAudio（“呼吸男性”，呼吸男性）；
常数呼吸：FC=（）=>{
const classes=useStyles（）；
const-gender=useSelector（（state）=>state.gender）；
如果（性别！=“静音”）{
音频文件[`breathe_${gender}`].play（）；
音频文件[`breathe_${gender}`].loop=true；
}
返回(
);
};
出口违约；