ReactJS自动音频播放只工作一次，在调用渲染时需要它可以工作吗？答案

【问题标题】：ReactJS auto audio play working only once, need it to be workable when render is called?ReactJS自动音频播放只工作一次，在调用渲染时需要它可以工作吗？
【发布时间】：2018-03-14 06:59:17
【问题描述】：

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

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

【问题讨论】：

你的反应组件在哪里？
@JosanIracheta 我添加了组件代码，在组件中这些值已更改{(yunread-zunread)+xunread} 并且音频也与此相关，但播放后不会播放。

标签： javascript html reactjs

【解决方案1】：

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

例如：

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

然后在需要时拨打this.audio.play();。

【讨论】：