diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 4910523..a89a098 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -26,6 +26,9 @@ export default function HomePage() { //检查是否为第一次播放,每次切换音频时需要重置 const [isFirst, setisFirst] = useState(true) + + //是否有操作过播放或者切换(用以判断是否需要自动播放,受限于浏览器规则,用户刚进来时没法自动播放) + const [played, setPlayed] = useState(false) //音频列表 const [musicList, setmusicList] = useState([]) @@ -100,65 +103,11 @@ export default function HomePage() { timestamp: Date.now(), prdt_id: prdtId ? prdtId : 5653, }).then((res:any) => { - console.log('产品音频列表获取成功=>', res.data) - for(let i = 0; i < res.data.data.Resources.length; i++){ - if(res.data.data.Resources[i].ResId === resId){ - setlistIndex(i) - } - } + const cur = res.data.data.Resources.findIndex((e: any) => e.ResId === +resId) + setlistIndex(cur !== -1 ? cur : 0) + console.log('产品音频列表获取成功=>', res.data, typeof resId, cur) setmusicList(res.data.data.Resources) - - axios.post('https://interapi.jm-kid.com/api/audio/resource', { - timestamp: Date.now(), - prdt_id: prdtId ? prdtId :5653, - res_id: resId ? resId : 44889 , - }).then((res: any) => { - console.log('产品资源获取成功=>', res.data) - - //判断播放方式 - if(res.data.data.Resource.PlayType === 'url'){ - const mDesc = { - PrdtTitle: res.data.data.Resource.ResTitle, - PrdtCover: res.data.data.Resource.ResCover, - } - setMusicDesc(mDesc) - settestMusic(res.data.data.Resource.PlayUrl) - setdurantionTime(res.data.data.Resource.ResDuration) - }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.Resource.ResPwd, - videoId: res.data.data.Resource.ResVcode - }, - headers: { - authorization: token_res.data.data.token - } - }).then((rres: any) => { - console.log('视频资源请求成功=>', rres.data) - const mDesc = { - PrdtTitle: res.data.data.Resource.ResTitle, - PrdtCover: res.data.data.Resource.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) - }) - }) - } - - - }) }) - - }, []) const startTimer = () => { @@ -190,7 +139,7 @@ export default function HomePage() { }; }, [timerId]); // 只有当 timerId 发生变化时才执行 - useEffect(()=> { + useEffect(() => { if(playMode > 2){ if(selectedDuration !== (playMode - 2) * 600){ stopTimer() @@ -202,15 +151,15 @@ export default function HomePage() { } }, [playMode]) - useEffect(()=>{ - + useEffect(() => { + isPlay && setPlayed(true) if(currentTime === durantionTime - 1){ setcurrentTime(0) } const audio = videoRef.current; - if(isPlay){ + if (isPlay) { if(currentTime !== 0){ if(isFirst){ console.log('第一次播放') @@ -279,7 +228,7 @@ export default function HomePage() { useEffect(()=>{ if(listIndex !== -1 && musicList.length > 0){ console.log('切换音频', listIndex) - setisPlay(false) + played && setisPlay(false) axios.post('https://interapi.jm-kid.com/api/audio/resource', { timestamp: Date.now(), prdt_id: reprdtId ? reprdtId : 5653, @@ -298,7 +247,7 @@ export default function HomePage() { setdurantionTime(res.data.data.Resource.ResDuration) setisFirst(true) setcurrentTime(0) - setisPlay(true) + played && setisPlay(true) }else{ //app request for video resource axios.post('https://api.jimeikid.com/jiyoumei/system/admin/employee/login', { @@ -322,12 +271,12 @@ export default function HomePage() { PrdtCover: res.data.data.Resource.ResCover, } setMusicDesc(mDesc) - console.log('视频资源=>',rres.data.data.body.playInfoList.playInfo[0].playURL) + console.log('视频资源1=>',rres.data.data.body.playInfoList.playInfo[0].playURL, played) 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(true) }) }) } @@ -429,6 +378,7 @@ export default function HomePage() { className='audio_operate_btn0' src='https://oss.jm-kid.com/wx_5colorflower/assets/prev.png' onClick={() => { + setPlayed(true) if(listIndex === 0){ setlistIndex(musicList.length - 1) }else{ @@ -445,6 +395,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{