From a5effd77c6ab31b6fd0a0e4b1dc105c2c9f8d605 Mon Sep 17 00:00:00 2001 From: yujialong <479214531@qq.com> Date: Tue, 15 Oct 2024 17:01:29 +0800 Subject: [PATCH] fix --- src/pages/index.tsx | 60 ++++----- src/pages/listen.tsx | 302 +++++++++++++++++-------------------------- 2 files changed, 145 insertions(+), 217 deletions(-) diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 8a3dcd5..e487937 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -37,7 +37,7 @@ export default function HomePage() { const [isShowList, setisShowList] = useState(false) //记录列表序号index - const [listIndex, setlistIndex] = useState(0) + const [listIndex, setlistIndex] = useState(-1) //记录音频播放模式 //0 列表循环 @@ -51,7 +51,6 @@ export default function HomePage() { const [isShowRg, setisShowRg] = useState(false) const [timerId, setTimerId] = useState>(null); - const [selectedDuration, setSelectedDuration] = useState(600); // 默认选择600秒 //记录prdtId const [reprdtId, setreprdtId] = useState('') @@ -119,7 +118,7 @@ export default function HomePage() { clearTimeout(id); setTimerId(null); // }, playTimer * 1000 * 3); - }, playTimer * 1000 * 60 * 10); + }, playTimer * 1000 * 60 * 10); setTimerId(id); }; @@ -165,7 +164,7 @@ export default function HomePage() { console.log('加载HLS流地址=>', testMusic) hls.loadSource(testMusic); // 加载 HLS 流地址 hls.attachMedia(audio); // 关联 media 元素 - hls.on(HLS.Events.MANIFEST_PARSED, function() { + hls.on(HLS.Events.MANIFEST_PARSED, function () { audio.play(); // 开始播放 setisFirst(false) }); @@ -174,18 +173,6 @@ export default function HomePage() { }else{ audio.pause() } - - audio.addEventListener('timeupdate', () => { - setcurrentTime(audio.currentTime) - }) - - audio.addEventListener('pause', () => { - setcurrentTime(audio.currentTime) - }) - - audio.addEventListener('play', () => { - setisPlay(true) - }) }, [isPlay]) useEffect(()=>{ @@ -250,31 +237,36 @@ export default function HomePage() { useEffect(() => { const audio = videoRef.current if (audio) { - audio.addEventListener('ended', endedHandle); + audio.addEventListener('timeupdate', timeupdateHandle) + audio.addEventListener('pause', timeupdateHandle) + audio.addEventListener('play', playHandle) + audio.addEventListener('ended', endedHandle) } return () => { if (audio) { - audio.removeEventListener('ended', endedHandle); + audio.removeEventListener('timeupdate', timeupdateHandle) + audio.removeEventListener('pause', timeupdateHandle) + audio.removeEventListener('play', playHandle) + audio.removeEventListener('ended', endedHandle) } - }; + } }, [listIndex, playMode]) - const timeupdateHandle = () => { - setcurrentTime(videoRef.current.currentTime) - } - const endedHandle = () => { - console.log("🚀 ~ audio.addEventListener ~ playMode:", playMode, listIndex) - if(playMode === 0){ - setisPlay(false) - if(listIndex < musicList.length - 1){ - setlistIndex(listIndex + 1) - }else{ - setlistIndex(0) - } - videoRef.current.currentTime = 0 + if(playMode === 0){ + setisPlay(false) + if(listIndex < musicList.length - 1){ + setlistIndex(listIndex + 1) + }else{ + setlistIndex(0) } + videoRef.current.currentTime = 0 + } + } + + const timeupdateHandle = () => { + setcurrentTime(videoRef.current.currentTime) } const playHandle = () => { @@ -303,7 +295,7 @@ export default function HomePage() { src='https://oss.jm-kid.com/wx_5colorflower/assets/regularPlay.png' onClick={() => setisShowRg(true)} > - + - +
([]) @@ -34,14 +37,16 @@ export default function HomePage() { const [isShowList, setisShowList] = useState(false) //记录列表序号index - const [listIndex, setlistIndex] = useState(0) + const [listIndex, setlistIndex] = useState(-1) //记录音频播放模式 //0 列表循环 //1 单曲循环 - //2 定时播放 const [playMode, setplayMode] = useState(0) + // 定时播放 + const [playTimer, setPlayTimer] = useState(0) + //控制定时播放弹窗 const [isShowRg, setisShowRg] = useState(false) @@ -93,7 +98,7 @@ export default function HomePage() { // resId => 36208 //请求音频列表 - axios.post('https:// interapi.jm-kid.com/api/product/resource', { + axios.post('https://interapi.jm-kid.com/api/product/resource', { timestamp: Date.now(), prdt_id: prdtId ? prdtId : 5113, res_type: '03', @@ -101,62 +106,19 @@ export default function HomePage() { console.log('产品音频列表获取成功=>', res.data) setmusicList(res.data.data.StoryResource) - console.log('PlayType=>', res.data.data.StoryResource[0].PlayType) - //判断播放方式 - if(res.data.data.StoryResource[0].PlayType === 'url'){ - console.log('url播放方式') - const mDesc = { - PrdtTitle: res.data.data.StoryResource[0].ResTitle, - PrdtCover: res.data.data.StoryResource[0].ResCover, - } - setMusicDesc(mDesc) - settestMusic(res.data.data.StoryResource[0].PlayUrl) - setdurantionTime(res.data.data.StoryResource[0].ResDuration) - }else{ - console.log('app播放方式') - //app request for video resource - axios.post('https://api.jimeikid.com/jiyoumei/system/admin/employee/login', { - "password": "WxBmGKupbl30+v4hfQC8aQ==", - "userName": "VqwgIY4g7s9DanyyqsKP4g==", - }).then((token_res: any) => { - console.log('app token=>', token_res.data.data.token) - - axios.get('https://api.jimeikid.com/jiyoumei/product/app/message/send/history/getPlayInfo',{ - params: { - token: res.data.data.StoryResource[0].ResPwd, - videoId: res.data.data.StoryResource[0].ResVcode - }, - headers: { - authorization: token_res.data.data.token - } - }).then((rres: any) => { - console.log('视频资源请求成功=>', rres.data) - const mDesc = { - PrdtTitle: res.data.data.StoryResource[0].ResTitle, - PrdtCover: res.data.data.StoryResource[0].ResCover, - } - setMusicDesc(mDesc) - console.log('视频资源=>',rres.data.data.body.playInfoList.playInfo[0].playURL) - settestMusic(rres.data.data.body.playInfoList.playInfo[0].playURL) - setdurantionTime(rres.data.data.body.playInfoList.playInfo[0].duration) - }) - }) - } + setlistIndex(0) }) - - }, []) const startTimer = () => { - if (timerId !== null) return; // 如果已经有计时器在运行，则返回 - let id = setInterval(() => { - setSeconds(prevSeconds => prevSeconds + 1); - if (seconds >= selectedDuration - 1) { - videoRef.current = null; - clearInterval(id); - setTimerId(null); - } - }, 1000); + stopTimer() + const id = setTimeout(() => { + setisPlay(false) + setPlayTimer(0) + clearTimeout(id); + setTimerId(null); + // }, playTimer * 1000 * 3); + }, playTimer * 1000 * 60 * 10); setTimerId(id); }; @@ -164,32 +126,15 @@ export default function HomePage() { if (timerId !== null) { clearInterval(timerId); setTimerId(null); - setSeconds(0); // 重置秒数 } }; useEffect(() => { - return () => { - if (timerId !== null) { - clearInterval(timerId); - } - }; - }, [timerId]); // 只有当 timerId 发生变化时才执行 - - useEffect(()=> { - if(playMode > 2){ - if(selectedDuration !== (playMode - 2) * 600){ - stopTimer() - setSelectedDuration((playMode - 2) * 600) - startTimer() - } - }else if(playMode === 2){ - stopTimer() - } - }, [playMode]) + playTimer && startTimer() + }, [playTimer]) useEffect(()=>{ - + isPlay && setPlayed(true) if(currentTime === durantionTime - 1){ setcurrentTime(0) } @@ -221,115 +166,104 @@ export default function HomePage() { hls.attachMedia(audio); // 关联 media 元素 hls.on(HLS.Events.MANIFEST_PARSED, function() { audio.play(); // 开始播放 + setisFirst(false) }); } }else{ audio.pause() } - - audio.addEventListener('timeupdate', () => { - setcurrentTime(audio.currentTime) - }) - - audio.addEventListener('ended', () => { - console.log('音频播放结束') - setisPlay(false) - if(playMode === 0){ - if(listIndex < musicList.length - 1){ - console.log('下一首,更改listIndex', listIndex) - setlistIndex(listIndex + 1) - }else{ - setlistIndex(0) - } - }else if(playMode === 1){ - - }else if(playMode === 2){ - setplayMode(0) - } - audio.currentTime = 0 - }) - - audio.addEventListener('error', (res: any) => { - console.log('error', res) - }) - - audio.addEventListener('pause', () => { - setcurrentTime(audio.currentTime) - setisPlay(false) - }) - - audio.addEventListener('play', () => { - setisPlay(true) - }) }, [isPlay]) useEffect(()=>{ + console.log('切换音频', listIndex, musicList) if(listIndex !== -1 && musicList.length > 0){ - console.log('切换音频', listIndex) - setisPlay(false) - //请求音频列表 - axios.post('https:// interapi.jm-kid.com/api/product/resource', { - timestamp: Date.now(), - prdt_id: reprdtId ? reprdtId : 5113, - res_type: '03', - }).then((res:any) => { - console.log('产品音频列表获取成功=>', res.data) - - //判断播放方式 - if(res.data.data.StoryResource[listIndex].PlayType === 'url'){ - const mDesc = { - PrdtTitle: res.data.data.StoryResource[listIndex].ResTitle, - PrdtCover: res.data.data.StoryResource[listIndex].ResCover, - } - setMusicDesc(mDesc) - settestMusic(res.data.data.StoryResource[listIndex].PlayUrl) - setdurantionTime(res.data.data.StoryResource[listIndex].ResDuration) - setisFirst(true) - setcurrentTime(0) - setisPlay(true) - }else{ - //app request for video resource - axios.post('https://api.jimeikid.com/jiyoumei/system/admin/employee/login', { - "password": "WxBmGKupbl30+v4hfQC8aQ==", - "userName": "VqwgIY4g7s9DanyyqsKP4g==", - }).then((token_res: any) => { - console.log('app token=>', token_res.data.data.token) - - axios.get('https://api.jimeikid.com/jiyoumei/product/app/message/send/history/getPlayInfo',{ - params: { - token: res.data.data.StoryResource[listIndex].ResPwd, - videoId: res.data.data.StoryResource[listIndex].ResVcode - }, - headers: { - authorization: token_res.data.data.token - } - }).then((rres: any) => { - console.log('视频资源请求成功=>', rres.data) - const mDesc = { - PrdtTitle: res.data.data.StoryResource[listIndex].ResTitle, - PrdtCover: res.data.data.StoryResource[listIndex].ResCover, - } - setMusicDesc(mDesc) - console.log('视频资源=>',rres.data.data.body.playInfoList.playInfo[0].playURL) - settestMusic(rres.data.data.body.playInfoList.playInfo[0].playURL) - setdurantionTime(rres.data.data.body.playInfoList.playInfo[0].duration) - setisFirst(true) - setcurrentTime(0) - setisPlay(true) - }) - }) + played && setisPlay(false) + //判断播放方式 + if(musicList[listIndex].PlayType === 'url'){ + const mDesc = { + PrdtTitle: musicList[listIndex].ResTitle, + PrdtCover: musicList[listIndex].ResCover, } - }) + setMusicDesc(mDesc) + settestMusic(musicList[listIndex].PlayUrl) + setdurantionTime(musicList[listIndex].ResDuration) + setisFirst(true) + setcurrentTime(0) + played && setisPlay(true) + }else{ + //app request for video resource + axios.post('https://api.jimeikid.com/jiyoumei/system/admin/employee/login', { + "password": "WxBmGKupbl30+v4hfQC8aQ==", + "userName": "VqwgIY4g7s9DanyyqsKP4g==", + }).then((token_res: any) => { + console.log('app token=>', token_res.data.data.token) + + axios.get('https://api.jimeikid.com/jiyoumei/product/app/message/send/history/getPlayInfo',{ + params: { + token: musicList[listIndex].ResPwd, + videoId: musicList[listIndex].ResVcode + }, + headers: { + authorization: token_res.data.data.token + } + }).then((rres: any) => { + console.log('视频资源请求成功=>', rres.data) + const mDesc = { + PrdtTitle: musicList[listIndex].ResTitle, + PrdtCover: musicList[listIndex].ResCover, + } + setMusicDesc(mDesc) + console.log('视频资源=>',rres.data.data.body.playInfoList.playInfo[0].playURL) + settestMusic(rres.data.data.body.playInfoList.playInfo[0].playURL) + setdurantionTime(rres.data.data.body.playInfoList.playInfo[0].duration) + setisFirst(true) + setcurrentTime(0) + played && setisPlay(true) + }) + }) } - + } }, [listIndex]) - useEffect(()=>{ - if(playMode > 1){ - setisShowRg(true) + useEffect(() => { + const audio = videoRef.current + if (audio) { + audio.addEventListener('timeupdate', timeupdateHandle) + audio.addEventListener('pause', timeupdateHandle) + audio.addEventListener('play', playHandle) + audio.addEventListener('ended', endedHandle) } - }, [playMode]) + + return () => { + if (audio) { + audio.removeEventListener('timeupdate', timeupdateHandle) + audio.removeEventListener('pause', timeupdateHandle) + audio.removeEventListener('play', playHandle) + audio.removeEventListener('ended', endedHandle) + } + } + }, [listIndex, playMode]) + + const endedHandle = () => { + if(playMode === 0){ + setisPlay(false) + if(listIndex < musicList.length - 1){ + setlistIndex(listIndex + 1) + }else{ + setlistIndex(0) + } + videoRef.current.currentTime = 0 + } + } + + const timeupdateHandle = () => { + setcurrentTime(videoRef.current.currentTime) + } + + const playHandle = () => { + setisPlay(true) + } const handleClickList = () => { setisShowList(true) @@ -345,7 +279,15 @@ export default function HomePage() {
+
{MusicDesc.PrdtTitle}
+ + setisShowRg(true)} + > +
- +
- { - if(playMode === 0){ - setplayMode(1) - }else if(playMode === 1){ - setplayMode(2) - }else{ - setplayMode(0) - } - }} + src={playMode === 0 ? 'https://oss.jm-kid.com/wx_5colorflower/assets/listPlay.png' : 'https://oss.jm-kid.com/wx_5colorflower/assets/cyclePlay.png'} + onClick={() => setplayMode(m => m ? 0 : 1)} > { + setPlayed(true) if(listIndex === 0){ setlistIndex(musicList.length - 1) }else{ @@ -432,6 +367,7 @@ export default function HomePage() { className='audio_operate_btn0' src='https://oss.jm-kid.com/wx_5colorflower/assets/next.png' onClick={() => { + setPlayed(true) if(listIndex < musicList.length - 1){ setlistIndex(listIndex + 1) }else{ @@ -460,8 +396,8 @@ export default function HomePage() { setisShowRg(false)} - type={playMode} - setType={setplayMode} + playTimer={playTimer} + setPlayTimer={setPlayTimer} >
)