在 React 中显示音频波形

Question

所以我正在建立这个网页，它允许用户上传一首歌曲，并在主页上显示为一张卡片。 有点像Soundcloud...

在来自 html、css 和 JS 之后，我刚刚开始学习 React。 所以请理解我对这一切都是陌生的。

我已经对这个主题进行了很多研究，但似乎没有人适合我。

我一直在尝试 howler.js 和 wavesurfer.js，但没有任何显示波形的运气。

有没有其他人尝试过这样做？ 有人可以帮忙吗？

import { ErrorResponse } from '@remix-run/router';
import React from 'react'
import wavesurfer from 'wavesurfer.js'
import "./css/audio.css"
import { useRef } from 'react';

export const AudioVisualizer = (props) => {
// the homepage has a function to map through all the objects     in the 
// database, and in return i get every object. I then get the link from each
// object and pass this link into this function as an ARgument. 
let link = props; 
const audioRef = useRef();
console.log("here is props:  " + link);

try {

var audioTrack = wavesurfer.create({
    container: audioRef,
    wavecolor: "#eee",
    progressColor: "red",
    barWidth: 2,
});

audioTrack.load(link);
} catch (ErrorResponse)  {
    console.error("Something happened..");
    return ErrorResponse;
};

return (
    <div className='audio' ref={audioRef}>

    </div>
)

}

从那里我有实际的 Home.js 页面，我想在其中显示从上面的 function 返回的内容。

home.js 文件如下所示：

import React, { useEffect, useState } from 'react';
import '../components/css/home/home.css';
import {collection, getDocs, onSnapshot} from 'firebase/firestore';
import {db} from '../firebase'
import { useNavigate } from 'react-router-dom';
import {ClipLoader} from 'react-spinners';
import {AudioVisualizer} from "../components/audioVisualizer"


const Home = () => {
const [songs, setSongs] = useState([]);
const [loading, setLoading] = useState(false);
const navigate = useNavigate();


useEffect(() => {
    setLoading(true);
    const retrieveSongs = onSnapshot(
        collection(db, "songs"), 
        (snapshot) => {
            let arrayList = [];
            snapshot.docs.forEach((doc) => {
                arrayList.push({ id: doc.id, ...doc.data() });
            });
            setSongs(arrayList);
            setLoading(false);

        }, 
        (error) => {
            console.log(error);
        }
    );

    return () => {
        retrieveSongs();
    };
    
}, []);

return (
    <div className='home_wrapper'>
        <>
        
            {loading ? 
                <ClipLoader color="#36d7b7" />
            :

                <div className='homepage_container'>

                    {   songs.map((data) => {
                        return (
                            <article key={data.id} className='card'>
                                <div className='card_content'>
                                    <img className='card_image' src={data.image} />

                                    <div className='song_info'>
                                    <h2>{data.title}</h2>
                                    <h4>{data.artist}</h4>
                                    </div>

                                    <div className='audioplayer'>
                                    {AudioVisualizer(data.audio)}
                                    {/* <ReactAudioPlayer src={data.audio} autoPlay controls/> */}
                                    {/* <Waveform className="audio_file" audio={data.audio}/> */}
                                    </div>

                                </div>

                                <div className='card_content_extra'>
                                    <button onClick={() => navigate('/update/${data.id}')}>Edit</button>
                                    <button >Listen</button>
                                </div>

                                {/* <div id="waveform"></div>
                                    <button class="btn btn-primary" onclick="wavesurfer.playPause()">
                                    <i class="glyphicon glyphicon-play"></i>Play/Pause
                                    </button> */}
                            </article>
                        )
                    })}
                </div>
            }
        </>
    </div>
)

}

export default Home

Answer 1

对 DOM 元素的引用由.current属性访问，而不是由 React 创建的引用 object。

您可以使用useEffect挂钩来加载数据。

然后以 JSX react 方式创建 AudioVisualizer 组件，并将链接传递给 wavesurfer。

此外，wavesurfer dom object 需要有一些尺寸。

看看这个小例子：

import React from 'react';
import ReactDOM from 'react-dom/client';
import { useRef, useEffect } from 'react';
import wavesurfer from 'wavesurfer.js'

const AudioVisualizer = (props) => {

  const audioRef = useRef();

  useEffect(()=>{
    if (audioRef.current){
      let audioTrack = wavesurfer.create({
          container: audioRef.current,
      });
      audioTrack.load(props.link);
    }
  })

  return <div style={{minWidth: "200px"}} className='audio' ref={audioRef}></div> 
}

function App(props) {
  return (
    <div className='App'>
      <AudioVisualizer link={"https://actions.google.com/sounds/v1/science_fiction/creature_distortion_white_noise.ogg"}></AudioVisualizer>
    </div>
  );
}

ReactDOM.createRoot( 
  document.querySelector('#root')
).render(<App />)