react项目 循环播放背景音乐

本文介绍了一个使用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' />
    );
  }
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值