react项目循环播放背景音乐

最新推荐文章于 2025-06-23 16:36:21 发布

向来缘浅奈何晴深

最新推荐文章于 2025-06-23 16:36:21 发布

阅读量3.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： react

本文链接：https://blog.youkuaiyun.com/lzq_20150715/article/details/81625841

react 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一个使用React实现的音乐播放器组件，该组件能够自动加载和播放音频文件，并在当前音频播放结束后自动切换到下一个音频文件。通过定义状态和生命周期方法，实现了音频文件的获取和播放控制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

代码简写

let audioArr;
let audioIndex;
export default class IndexLayout extends React.PureComponent {
  state = {
    audioUrl: '',
  };

  componentDidMount() {
    this.getAudio();
  }
// 切换音乐
  ChangeMusic = (myAudio) => {
    if(audioArr.length-1<=audioIndex){
      audioIndex = 0;
      myAudio.src = audioArr[0].file_url;
      myAudio.play();
    }else{
      audioIndex = ++audioIndex;
      myAudio.src = audioArr[audioIndex].file_url;
      myAudio.play()
    }
  }

  // 获取音频
  getAudio=()=>{
    this.props.dispatch({
      type: 'front/getAudio',
      payload: {}}).then((data)=>{
        if(data && data.length > 0){
          audioArr = data;
          audioIndex = 0;
           // 音乐播放
          const myAudio = new Audio()
          myAudio.preload = true; //
          // myAudio.controls = true;
          myAudio.loop = false;
          myAudio.src = data[0].file_url;
          // 播完时候播放下一首
          myAudio.addEventListener('ended', this.ChangeMusic.bind(this, myAudio), false);
          myAudio.play();
          document.getElementById("audioBox").appendChild(myAudio);
        }
      })
  };


  render() {

    return (
       <div id='audioBox' />
    );
  }
}