reactjs - 无法在 Reactjs 中暂停音频
问题描述
我已经关注了其他提出类似问题的帖子,但他们没有提供解决方案。
我无法在我的 React Hook 中暂停音频。
这是我的反应钩子:
import React, { useState } from "react";
export default (App = props => {
const [audioStatus, changeAudioStatus] = useState(false);
const audio = new Audio(
"https://mcdn.podbean.com/mf/web/xm5ngf/The_Challenge_Chronicles_-_Episode_48_7ys6e.mp3"
);
audio.load();
const startAudio = () => {
audio.play();
changeAudioStatus(true);
};
const pauseAudio = () => {
console.log("here");
audio.pause();
changeAudioStatus(false);
};
return (
<>
{audioStatus ? (
<button onClick={pauseAudio}>pause</button>
) : (
<button onClick={startAudio}>start</button>
)}
</>
);
解决方案
您可以使用音频标签,并传递一个ref来做出反应,这样它就会知道正在使用什么元素。
export default (App = props => {
const [audioStatus, changeAudioStatus] = useState(false);
const myRef = useRef();
const startAudio = () => {
myRef.current.play();
changeAudioStatus(true);
};
const pauseAudio = () => {
console.log("here");
myRef.current.pause();
changeAudioStatus(false);
};
return (
<>
<audio
ref={myRef}
src="https://mcdn.podbean.com/mf/web/xm5ngf/The_Challenge_Chronicles_-_Episode_48_7ys6e.mp3"
/>
{audioStatus ? (
<button onClick={pauseAudio}>pause</button>
) : (
<button onClick={startAudio}>start</button>
)}
</>
);
});
推荐阅读
- linux - 命令 lvcreate 抛出无效标志错误?
- ios - 离开并返回视图后 TableView 无法正常工作
- swift - SQLite.Swift 在连接上给出错误 14
- flutter - 我的抽屉正在抛出“不正确使用 ParentDataWidget”。使用列表
- angular - 为什么@progress/kendo-angular-notification 将消息显示为纯文本?
- openlayers - openlayer 4.4 getArea() 给出了不好的结果
- xamarin - 如何绑定到 BindableLayout 内的 MasterPage 视图模型
- java - 如何使 runOnUiThread 同步
- properties - 为什么我们需要 EF Core 中的支持字段?
- lua - 如何在 Roblox 动画中的某个时刻发生某些事情