Блог

Я новичок в reactjs, в этом я определил компоненты, и я передаю заголовок аудиокартам, и с помощью title я также определяю источник аудиофайлов. и после нажатия на этот конкретный компонент я хочу воспроизвести этот конкретный аудиофайл. в js мы можем добиться этого, используя $(this).find();

но в reactjs, как это сделать, кто-нибудь может мне помочь

 import React from 'react';
import AudioCard from './AudioCard';
import '../css/RecommendedAudios.css';

function RecommandedAudios() {
    return (
        <div className="recommandedaudios">
            <h2>Recommanded</h2>
            <div className="recommandedaudios_audios">
                <AudioCard title="Arrows to Athens - Alive" />
                <AudioCard title="Arrows to Athens - Dust amp; Gold" />
                <AudioCard title="Arrows to Athens - Stars" />
                <AudioCard title="Arrows to Athens - Used to be" />
                <AudioCard title="Bryan Adams - Here I am" />
                <AudioCard title="My Heart Belongs to You" />
                <AudioCard title="Ravenscode - My Escape" />
            </div>
        </div>
    );
}

export default RecommandedAudios;

  

 import React from 'react';
import '../css/AudioCard.css';
import PlayArrowIcon from '@material-ui/icons/PlayArrow';
function AudioCard({ title, timestamp }) {
    var playsong = () => {
        const select = document.querySelector("audio");
        select.play();
        
    };
    return (
        <div onClick={playsong} className="audiocard">
            <PlayArrowIcon />
            <div className="audiocard_info">
                <div className="audiocard_title">
                    <h5>{title}</h5>
                    <audio src={require(`../sounds/${title}.mp3`)}></audio>
                </div>
            </div>
        </div>
    );
}

export default AudioCard;

  

документ.querySelector («audio») вернет первый тег «audio» в HTML, а не тот, который вы ищете

вы можете использовать ссылку:

 import React, { useRef } from 'react'

function AudioCard({ title, timestamp }) {

const audioEl = useRef(null);

const playsong = () => audioEl.current.play();

    return (
        <div onClick={playsong} className="audiocard">
            <PlayArrowIcon />
            <div className="audiocard_info">
                <div className="audiocard_title">
                    <h5>{title}</h5>
                    <audio ref={audioEl} src={require(`../sounds/${title}.mp3`)}></audio>
                </div>
            </div>
        </div>
    );
}
  

Вы можете использовать react-audio-player вместо использования query selector и HTML аудио тега, вы можете установить его с помощью

 npm install --save react-audio-player
  

и импортируйте библиотеку в свой код и используйте

 import ReactAudioPlayer from 'react-audio-player';
const [audio,ReferAudio] = useState()
 ...........

<div onClick={playsong} className="audiocard">
            <PlayArrowIcon />
            <div className="audiocard_info">
                <div className="audiocard_title">
                    <h5>{title}</h5>
                  <ReactAudioPlayer
  src={require(`../sounds/${title}.mp3`)}
  controls
ref={(e) => { ReferAudio(e) }}
/>
                </div>
            </div>
        </div>
  

вы можете получить доступ к проигрывателю, используя audio
вы можете узнать больше здесь