React.js 音乐播放器：如何在单击列表元素时播放音频？

Question

大家下午好，

我是一名新程序员，我最近开始学习音乐播放器教程，但遇到了一些问题。

项目概况：

如前所述，这是一个用create-react-app制作的音乐播放器项目。 objective是点击你选择的歌曲的图片，为你播放歌曲。

歌曲以 mp3 格式保存在名为 music 的文件夹中。 music 文件夹位于 src 目录中。每首歌曲都分配给它给定的歌曲图像（正如您将在我下面提供的代码中看到的那样）。然后 songs/images 被包裹在 <ol> 列表元素中。

问题：

我在单击图像时无法播放音频。我整合了很多从不同用户那里收到的建议。虽然我很感激结果，即代码编译（没有错误消息），但我仍然遇到同样的问题，那就是点击时音频不播放。

所以澄清一下，我怎样才能让它在我单击列表元素时播放指定的音频？请更正我的代码并提供示例使用我在下面提供的代码的解决方案。由于我的新手技能，我对任何复杂的术语都不熟悉。

代码：

Turkish.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>
    );
  };

Package.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

Answer 1

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

中删除 'audio'

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 })}
        onError={() => setStatus({ ...status, error: true })}
      />
    </li>
  );
};

React.js 音乐播放器：如何在单击列表元素时播放音频？

React.js Music-Player: How can I play audio when list element is clicked?

html

javascript

performance

jquery

reactjs

代码：