1分間のプレビューを実行

完了した論理をプロジェクトに適用しましょう.
サイドバーの音源を1分だけ再生するには、オーディオオブジェクトにアクセスする必要があります.
react-h 5-audio-playerはモジュールなのでdivラベルで包まれているのがモジュールです.

react-h 5-audioplayerのnpm公式ドキュメントは、モジュールを高度な用途に使用します.
classコンポーネントでDom要素アクセスを使用します.

useRef

userefは以前にもブログを書いたことがありますが、今から見てみましょう.
これはreactからDOM要素にアクセスできるHookです.

これにより、react-h 5-audio-playerの参照が最初に指定され、隠されたaudioオブジェクトにアクセスし、適用に成功します.

autoPlayAfterSrcChange

1分間の予聴を実施する過程で、予想外の状況が発見された.
非ログインでログインすると、データベースに格納されているプレイリストが有効になります.
src値がプレイリストの最後の曲の値に変更されるため、ログインすると音楽が自動的に再生されます.
npmの公式文書を読み直すと、AutoPlayAfterSrChangeというプロパティがあります.
これは音楽が変わると自動的に再生される属性です.
(以前は、srcが変更されると自動的に音源が再生されていました.)
これは保持されているはずですが、プレイリストが最初に適用された場合は適用されません.
このプロパティは、userEffectでプレイリストを受信する前にfalseのままにしてください.
オーディオ再生時にこの状態をtrueに変更することを解決しました.
afterRenderというステータスのプロパティ値を設定し、変更しました.

  const [afterRender, setAfterRender] = useState(false);

  useEffect(() => {
  	 audio.current.audio.current.onplay = () => {
      setAfterRender(true);
      play1min();
    };

    audio.current.audio.current.onpause = () => {
      play1min();
    };

    setAfterRender(false);

    if (isLogin) {
      axios.get(`${process.env.REACT_APP_API_URL}/playlist`, { headers: { accesstoken: accessToken } })
        .then(res => {
          if (res.status === 200) {
            dispatch(inputPlayList(res.data.playlist));
            if (res.data.playlist.length > 0) {
              setCurrentMusic(res.data.playlist[res.data.playlist.length - 1]);
            }
          }
        })
        .catch(err => {
          if (err.response) {
            if (err.response.status === 404) {
              dispatch(inputPlayList([]));
            }
          } else console.log(err);
        });
    } else {
      setCurrentMusic(playList[playList.length - 1]);
    }
  }, [isLogin]);


  <AudioPlayer
	...
   autoPlayAfterSrcChange={afterRender}
  />

今日はここまで。

プロジェクトに当てはまる部分では心配ですが、研究を続けていけば解決策があると思います.
これからも心配よりも深く調べていくという気持ちで臨みます.