Javascript ReactJS自动音频播放仅工作一次，在调用render时是否需要工作？

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

<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>
}

{flag=='online'
?
{onlineUnread===''？
：{（onlineUnread.users[0]==userId+“.id”| | onlineUnread.users[1]==userId+“.id”）？“”：
{（yunread zunread）+xunread尝试通过
ref
使用另一种方法，并使用
Audio
API播放声音

例如：

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

你的react组件在哪里？@JosanIracheta我已经添加了组件代码，在组件中，这些值被更改了
{（yunread zunred）+xunred}
，音频也与此一起播放，但在一次播放后不会播放。