8wDlpd.png
8wDFp9.png
8wDEOx.png
8wDMfH.png
8wDKte.png

REACT 中的带有 Wavesurfer 的 AUDIOPLAYER:为什么未加载曲目?(不支持的源)

Zakaria 1月前

14 0

我使用 wavesurfer.js 在 JS 中构建了一个带有播放列表的出色音频播放器,但现在我正尝试在 React 中实现相同的功能。由于某种原因,它不会加载任何曲目。导入 React,{ useEffect,useRef,useS...

我使用 wavesurfer.js 在 JS 中构建了一个带播放列表的出色音频播放器,但现在我正尝试在 react 中实现相同的功能。不知为何它无法加载任何曲目。

import React, { useEffect, useRef, useState } from 'react';
import WaveSurfer from 'wavesurfer.js';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faBackward } from '@fortawesome/free-solid-svg-icons'
import { faForward } from '@fortawesome/free-solid-svg-icons'
import { faPlay } from '@fortawesome/free-solid-svg-icons'
import { faPause} from '@fortawesome/free-solid-svg-icons'

const AudioPlayer = () => {
  const [trackNumber, setTrackNumber] = useState(1);
  const [isPlaying, setIsPlaying] = useState(false);
  const audioPath = './audio/';
  const playList = [
    'Greedy Guns_Miguel Cintra_Prelude (gameplay extended theme).wav',
    'track_01.mp3',
    'track_02.mp3',
    'track_03.mp3'
  ];

  const waveSurferRef = useRef(null);

  useEffect(() => {
    waveSurferRef.current = WaveSurfer.create({
      container: '.audio',
      waveColor: '#28ABE2',
      progressColor: '#103A61',
      height: 90,
      barWidth: 0.5,
      cursorColor: 'rgba(34, 34, 34, 0.2)',
      responsive: true
    });



    return () => {
      waveSurferRef.current.destroy();
    };
  }, []);

  const loadTrack = (trackIndex) => {""
    const playedTrack = playList[trackIndex];
    waveSurferRef.current.load(audioPath + playedTrack);
    document.querySelector('.track-name').innerText = playedTrack;

    waveSurferRef.current.once('ready', () => {
      waveSurferRef.current.play();
      setIsPlaying(true);
    });
  };

  const handleNextTrack = () => {
    const nextTrackIndex = (trackNumber + 1) % playList.length;
    setTrackNumber(nextTrackIndex);
    loadTrack(nextTrackIndex);
  };

  const handlePreviousTrack = () => {
    const prevTrackIndex = (trackNumber - 1 + playList.length) % playList.length;
    setTrackNumber(prevTrackIndex);
    loadTrack(prevTrackIndex);
  };

  const togglePlayPause = () => {
    waveSurferRef.current.playPause();
    setIsPlaying(waveSurferRef.current.isPlaying());
  };


  return (
    <div className="audio-container">
      <div className="buttons">
        <button>
          <FontAwesomeIcon icon={faBackward} onClick={handlePreviousTrack} className="buttons" />
        </button>
          <button className={`play-btn ${isPlaying ? 'playing' : ''}`} onClick={togglePlayPause}>
          {isPlaying ? <FontAwesomeIcon className="fa-pause buttons"  icon={faPause} /> : <FontAwesomeIcon className="fa-play" icon={faPlay} />}
          </button>
          <button>
          <FontAwesomeIcon icon={faForward} onClick={handleNextTrack} className="buttons" />
          </button>
      </div>
        <div className="track-name"></div>
        <div className="audio"></div>
    </div>
  );
};

export default AudioPlayer;

每次我按下“播放按钮”时都会出现此错误:

request.js:1 获取最终的音频文件:GET \'http://localhost:5173/audio/track_03.mp3\'。

localhost/:1 未捕获(承诺中)NotSupportedError:该元素没有支持的源。

这是路径的问题吗?

作为参考,JS 代码运行良好。是否可以将 JS 代码复制过去并将其导入到我的 React 应用程序中?

// AUDIOPLAYER

var audioTrack = WaveSurfer.create({
  container: '.audio',
  waveColor: '#28ABE2',
  progressColor: '#103A61',
  height: 90,
  barWidth: 0.5,
  cursorColor: 'rgba(34, 34, 34, 0.2)',
  responsive: true
});


var nextTrack = document.querySelector('.fa-forward');
var previousTrack = document.querySelector('.fa-backward');
var audioPath = '/static/audio/'
var playList = ['Greedy Guns_Miguel Cintra_Prelude (gameplay extended theme).wav', 'track_01.mp3', 'track_02.mp3', 'track_03.mp3'];
var trackNumber = 0;
var playedTrack = playList[trackNumber];
console.log(playedTrack)
audioTrack.load(audioPath + playedTrack);

function playTrack() {
  var playedTrack = playList[trackNumber];
  console.log(playedTrack)
  audioTrack.load(audioPath + playedTrack);
  document.querySelector('.track-name').innerText = playedTrack;
  audioTrack.on('ready', function () {
    audioTrack.play();
  });
}

nextTrack.addEventListener('click', () => {

  if (trackNumber === playList.length - 1) {
    trackNumber = 0;
    playTrack();
  } else {
    trackNumber += 1;
    playTrack();
  }
});

previousTrack.addEventListener('click', () => {
  if (trackNumber === 0) {
    trackNumber = playList.length - 1;
    playTrack();
  } else {
    trackNumber -= 1;
    playTrack();
  }
});


document.querySelector('.track-name').innerText = playedTrack;


const play = document.querySelector('.play-btn');


play.addEventListener('click', () => {
  console.log('ok')
  audioTrack.playPause();

  if (audioTrack.isPlaying()) {
    play.classList.add("playing");
  } else {
    play.classList.remove("playing");
  }
});
帖子版权声明 1、本帖标题:REACT 中的带有 Wavesurfer 的 AUDIOPLAYER:为什么未加载曲目?(不支持的源)
    本站网址:http://xjnalaquan.com/
2、本网站的资源部分来源于网络,如有侵权,请联系站长进行删除处理。
3、会员发帖仅代表会员个人观点,并不代表本站赞同其观点和对其真实性负责。
4、本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
5、站长邮箱:yeweds@126.com 除非注明,本帖由Zakaria在本站《reactjs》版块原创发布, 转载请注明出处!
最新回复 (0)
返回
作者最近主题: