音乐播放器播放列表逻辑

Question

我正在创建一个小型音乐播放器网络应用程序，一切正常，但我遇到了问题：

我也想为它创建一个播放列表，我是 JS 的初学者，我不知道如何为此创建逻辑（每次用户单击播放列表中的特定歌曲标题时，播放他刚刚点击的那首歌曲）我将歌曲存储在一个数组中

Answer 1

您可以通过不同的方式实现此行为。

我添加了一个名为 setSong() 的函数，它接受一个名为 number 的参数并将歌曲设置为该编号（从 prevSong() 和 nextSong() 复制的代码逻辑）。我向每个 HTML 元素添加 class .player__song onclick 属性值为 setSong(<index>) 其中是歌曲在数组。

setSong() 函数如下所示：

function setSong(number){
  currentSong = number
  showSong()
  audio.play()
  changeBgBody()
}

Answer 2

import React, { Component,useRef, setStatus, status } from 'react';
import ‘./Song.css';

import song1 from "./music/song1.mp3";
import song2 from "./music/song2.mp3"
import song3 from "./music/song3.mp3"
import song4 from "./music/song4.mp3"

export default function MusicPlayer() {
    const data = [
        { imgSrc: ‘song1.png', audioSrc: song1},
        { imgSrc: ‘song2.png', audioSrc: song2},
        { imgSrc: ‘song3.png', audioSrc: song3},
        { imgSrc: ‘song4.png', audioSrc: song4},
    ];

    return (
        <div className=‘MusicPlayer>
            <ol>
            
                {data.map(({ imgSrc, audioSrc}) => (
                    <MediaComponent imgSrc={imgSrc} audioSrc={audioSrc}   />
                ))}
            </ol>
        </div>
    );
  
}

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

音乐播放器播放列表逻辑

Music player playlist logic

javascript

audio

playlist