React.jsMusic-Player：單擊串列元素時如何播放音頻？

大家下午好

我是一名新程式員，最近開始學習音樂播放器教程，但遇到了一些問題。

專案概況：

如前所述，它是一個音樂播放器專案，使用create-react-app. 目標是單擊您選擇的歌曲的影像，然后為您播放歌曲。

歌曲以 mp3 格式保存在名為music. 該music檔案夾位于 src 目錄中。每首歌曲都分配給其給定的歌曲影像（正如您將在下面提供的代碼中看到的那樣）。然后歌曲/影像被包裝在一個<ol>串列元素中。

問題：

單擊影像時，我無法播放音頻。我已經整合了很多我從不同用戶那里收到的建議。雖然我很感激結果，即代碼編譯（沒有錯誤訊息），但我仍然遇到同樣的問題，那就是點擊時音頻不播放。

所以澄清一下，我怎樣才能讓它在我單擊串列元素時播放分配的音頻？ 請更正我的代碼并使用我在下面提供的代碼提供解決方案示例。由于我的新手技能，我不熟悉任何復雜的術語。

編碼：

土耳其語.js （音樂播放器檔案）：

import React, { Component,audio,useRef } from 'react';

import turk1 from "../music/turk1.mp3";
import turk2 from "../music/turk2.mp3"
import turk3 from "../music/turk3.mp3"
import turk4 from "../music/turk4.mp3"

const data = [
    { imgSrc: 'turk1.png', audioSrc: turk1 },
    { imgSrc: 'turk2.png', audioSrc: turk2 },
    { imgSrc: 'turk3.png', audioSrc: turk3 },
    { imgSrc: 'turk4.png', audioSrc: turk4 },
  ];

  export default class Turkish extends Component {
    render() {
      return (
        <div>
          <ol>
            {data.map(({ imgSrc, audioSrc }) => (
              <MediaComponent imgSrc={imgSrc} audioSrc={audioSrc} />
            ))}
          </ol>
        </div>
      );
    }
  }
  
  const MediaComponent = ({ imgSrc, audioSrc }) => {
    const audioRef = useRef(null);
    const toggleAudio = () =>
      audio.ref.current.paused
        ? audioRef.current.play()
        : audioRef.current.pause();
    return (
      <li>
        <img src={imgSrc} onClick={toggleAudio}/>
        <audio ref={audioRef} src={audioSrc} />
      </li>
    );
  };

包.json：

{
  "name": "spotifly",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^12.1.5",
    "@testing-library/user-event": "^13.5.0",
    "bootstrap": "^5.1.3",
    "navbar": "^2.1.0",
    "react": "^18.0.0",
    "react-audio-player": "^0.17.0",
    "react-bootstrap": "^2.2.3",
    "react-bootstrap-icons": "^1.8.1",
    "react-dom": "^18.0.0",
    "react-is": "^18.0.0",
    "react-router-dom": "^6.3.0",
    "react-scripts": "5.0.0",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

音樂檔案夾的圖片：

當我點擊歌曲檔案時，它告訴我：

我非常感謝您的時間和精力，讓我知道您的想法！

最好的，

-Zpo

uj5u.com熱心網友回復：

洗掉“音頻”import React, { Component,audio,useRef } from 'react';

const MediaComponent = ({ imgSrc, audioSrc }) => {
  const audioRef = useRef(null);
  const toggleAudio = () =>
    audioRef.current === null
      ? console.log("Audio component is not loaded yet.")
      : audioRef.current.paused
      ? audioRef.current.play()
      : audioRef.current.pause();
  return (
    <li>
      <img src={imgSrc} onClick={toggleAudio} />
      <audio ref={audioRef} src={audioSrc} />
    </li>
  );
};

我也可以提出一些建議。它是由你決定。

const AudioPlayer = ({ imgSrc, audioSrc }) => {
  const [status, setStatus] = useState({
    isPlaying: false,
    isLoop: false,
    isLoaded: false,
    error: false,
    ...others,
  });
  const audioRef = useRef(null);

  const toggleAudio = () =>
    status.isLoaded
      ? status.isPlaying
        ? audioRef.current.pause()
        : audioRef.current.play()
      : console.log("Audio has not loaded yet.");

  return (
    <li>
      <img src={imgSrc} onClick={toggleAudio} />
      <audio
        ref={audioRef}
        src={audioSrc}
        onLoad={() => setStatus({ ...status, isLoaded: true })}
        onPlay={() => setStatus({ ...status, isPlaying: true })}
        onPause={() => setStatus({ ...status, isPlaying: false })}
        one rror={() => setStatus({ ...status, error: true })}
      />
    </li>
  );
};

標籤：javascript html jQuery 反应 表现

上一篇：（內置）Lua函式的本地宣告以減少開銷

下一篇：與端點通信的網路錯誤。限制CPU使用率