ReactJS 自动音频播放仅工作一次，在调用渲染时需要它可用

Question

我在音频播放方面需要帮助，我在渲染中使用它，当我更改在文本字段中输入从渲染执行的相同行但音频不再播放时，它只播放一次声音。我需要这个声音播放，因为向用户发出声音通知。任何帮助将不胜感激。

<audio className="hidden" controls autoPlay>
      <source src="src/images/note.mp3" />
</audio>

元件

{ flag === 'online'
                                            ?
  <div>{  onlineUnread === '' ? <div></div>
   :<span>{(onlineUnread.users[0] === userId+".id" || onlineUnread.users[1] === userId+".id") ? '' :<div>
    { (yunread-zunread)+xunread <= 0 ? '' :
      <div>
         <audio className="hidden" controls autoPlay>
           <source src="src/images/note.mp3" />
         </audio>
        {(yunread-zunread)+xunread}
      </div>
     }</div>}</span>
     }</div>
      :
    <span>{xunread <= 0
        ?'':
       <div>
    <audio className="hidden" controls autoPlay>
   <source src="src/images/note.mp3" />
       </audio>
   {xunread}
     </div>}
  </span>
}

Answer 1

尝试通过ref使用另一种方法，并使用Audio API 来播放声音。

例如：

<audio ref={(audio) => { this.audio = audio }} src="src/images/note.mp3" />

然后在需要时致电this.audio.play();。

另请参阅： https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/play