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

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

1 个答案: