Javascript .play（）不适用于iphone safari，适用于chrome。我做错了什么？

我在试一下，波莉。

我在iphone safari上播放声音时遇到问题。在PC chrome上运行良好。我怀疑我的.play（）有问题

我是新手，如能提供任何帮助/指导，将不胜感激

import React, { useState, Component } from 'react';

import Amplify from 'aws-amplify';
import Predictions, { AmazonAIPredictionsProvider } from '@aws-amplify/predictions'; 
//import awsconfig from './aws-exports';
import { PlayCircle } from 'react-feather';


 
Amplify.addPluggable(new AmazonAIPredictionsProvider());
//Amplify.configure(awsconfig);
 
 
function TextToSpeech(theName) {
  const [response, setResponse] = useState("...")
  const [textToGenerateSpeech, setTextToGenerateSpeech] = useState("write to speech");
  const [audioStream, setAudioStream] = useState();


  

  function getTextAndTriggerGenerate() {
    var theText = theName.theName
    //var theText = props.nameToAudio
    generateTextToSpeech(theText)
  }

  function generateTextToSpeech(text) {
    setResponse('Generating audio...');
    Predictions.convert({
      textToSpeech: {
        source: {
          //text: textToGenerateSpeech,
          text: text,
          language: "hi-IN" // default configured in aws-exports.js 
        },
        voiceId: "Aditi"
      }
    }).then(result => {
      
      setAudioStream(result.speech.url);      
      setResponse(`Generation completed, press play`);
      
      const soundEffect = new Audio();
      soundEffect.src = result.speech.url
      soundEffect.play();      
    })
      .catch(err => setResponse(JSON.stringify(err, null, 2)))
  }

  function setText(event) {
    setTextToGenerateSpeech(event.target.value);
  }

  function play() {
    var audio = new Audio();
    audio.src = audioStream;
    //audio.play();
    var playPromise = audio.play();
 
  if (playPromise !== undefined) {
    playPromise.then(_ => {
      // Automatic playback started!
      // Show playing UI.
      // We can now safely pause audio...
      audio.pause();
    })
    .catch(error => {
      // Auto-play was prevented
      // Show paused UI.
    });
  }
    //audio.pause();
  }
  return (
    <span>
    <button className="btn btn-outline-light" onClick={getTextAndTriggerGenerate}>
      <PlayCircle  color="green" size="22" />
      
    </button>
    </span>

        
        
        
  );
}
 
class SpeakIt extends Component {

    constructor(props){
        super(props);
    }
render() {
  return (
     
         
      <TextToSpeech theName = {this.props.nameToAudio}/>    
  );
}

}
 
export default SpeakIt;

import React，{useState，Component}来自'React'；
从“aws放大”导入放大；
从'@aws amplify/Predictions'导入预测，{AmazonAIPredictionsProvider}；
//从“/aws exports”导入awsconfig；
从“react feather”导入{PlayCircle}；
addPluggable（新的AmazonAIPredictionsProvider（））；
//放大、配置（awsconfig）；
函数TextToSpeech（名称）{
const[response，setResponse]=useState（“…”）
const[textToGenerateSpeech，setTextToGenerateSpeech]=useState（“写入语音”）；
const[audioStream，setAudioStream]=useState（）；
函数getTextAndTriggerGenerate（）{
var theText=theName.theName
//var theText=props.nameToAudio
generateTextToSpeech（文本）
}
函数generateTextToSpeech（文本）{
setResponse（'生成音频…'）；
转换({
textToSpeech：{
资料来源：{
//text:textToGenerateSpeech，
文本：文本，
语言：“hi IN”//aws-exports.js中配置的默认值
},
配音：“再见”
}
})。然后（结果=>{
setAudioStream（result.speech.url）；
setResponse（`Generation completed，press play`）；
const soundEffect=新音频（）；
soundEffect.src=result.speech.url
音效。播放（）；
})
.catch（err=>setResponse（JSON.stringify（err，null，2）））
}
函数setText（事件）{
setTextToGenerateSpeech（event.target.value）；
}
函数播放（）{
var audio=新音频（）；
audio.src=音频流；
//音频播放（）；
var playPromise=audio.play（）；
如果（playPromise！==未定义）{
playPromise.然后（=>{
//自动播放开始了！
//显示正在播放的用户界面。
//我们现在可以安全地暂停音频。。。
audio.pause（）；
})
.catch（错误=>{
//自动播放被阻止
//显示暂停的用户界面。
});
}
//audio.pause（）；
}
返回(
);
}
类SpeakIt扩展组件{
建造师（道具）{
超级（道具）；
}
render（）{
返回(
);
}
}
导出默认SpeakIt；