.play在iPhone Safari上不起作用，在chrome上起作用我究竟做错了什么？

如何解决.play在iPhone Safari上不起作用，在chrome上起作用我究竟做错了什么？

我正在尝试AWS Polly。 https://aws.amazon.com/blogs/mobile/announcing-the-new-predictions-category-in-amplify-framework/

我无法在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;