react.js 实现音乐播放、下一曲、以及删除歌曲（仅播放列表）

import React, { Component } from 'react';

export default class Music extends Component {

  constructor(props) {

    super(props);

    this.state = {

      songs:[

        {"id":"1","title":"Love","singer":"cone翻唱团","album":"Love shot","year":"2016","type":"翻唱"},

        {"id":"2","title":"Fever","singer":"rosy","album":"Medley Song","year":"2019","type":"原唱"},

        {"id":"3","title":"和你","singer":"李飘飘","album":"和你合集","year":"2020","type":"翻唱"},

        {"id":"4","title":"我很快乐","singer":"鹿小桃","album":"我很快乐","year":"2019","type":"翻唱"},

        {"id":"5","title":"暖暖","singer":"郑豪豪","album":"暖暖","year":"2018","type":"翻唱"},

        {"id":"6","title":"我想念","singer":"颜辞","album":"继一.","year":"2021","type":"翻唱"},

        {"id":"7","title":"潮汐","singer":"紫沐","album":"潮汐","year":"2022","type":"翻唱"},

        {"id":"8","title":"刻在我心底的名字","singer":"卢广仲","album":"刻在我心底的声音","year":"2016","type":"原唱"},

        {"id":"9","title":"如故","singer":"卿月怀","album":"载不动愁","year":"2021","type":"原唱"},

        {"id":"10","title":"舒伯特玫瑰","singer":"朱康伟；利阳","album":"舒伯特","year":"2019","type":"原唱"}

      ],

      mp3file: '',

      nowitem:'',

      nowtitle:''

    };

  }  

 

  handleClick(item, e) {  

    let file='http://localhost:8088/myServer/mybase/mp3/'+item.title+'.mp3';  

    this.setState({mp3file: file});  

    this.setState({nowitem: item.id});

    this.setState({nowitem: item.title});

       console.log(this.state.mp3file);

  }  

  deleteClick(item, e){

  let id=item.id;

  id=Number(id);

  var mp3=this.state.songs;

  mp3.splice(id-1,1);

  this.setState({songs: mp3});

  console.log(id,this.state.songs);

  }

  nextplay = (e) =>{

        let id=this.state.nowitem;

        id=Number(id);

        let item=this.state.songs[id];

        let file='http://localhost:8088/myServer/mybase/mp3/'+item.title+'.mp3';  

        this.setState({mp3file: file});  

        this.setState({nowitem: id+1});

        this.setState({nowitem: item.title});

      }  

 

  render(){

    return (

      <div>

        <table style={{width:'80%'}}>

            <thead>

            <tr>

                <td>歌曲名字</td>

                <td>歌手</td>

                <td>专辑</td>

                <td>发行年份</td>

                <td>原唱/翻唱</td>

            </tr></thead>

            <tbody>

                  {

                    this.state.songs.map((item, index)=>{

                      return(

                        <tr key={"div2_"+index}  style={{marginLeft:12, marginTop:4}}>

                        <td>

                         <a href="#" onClick={this.deleteClick.bind(this, item)} style={{marginRight:'10px'}}><img src={require('../../images/deletefile.png')} /></a>

                         <a href="#" onClick={this.handleClick.bind(this, item)} style={{textDecoration:'none'}}><img src={require('../../images/play.png')} width="20" height="20" style={{marginRight:'10px'}}/>{item.title}</a>

                         </td>

                         <td>{item.singer}</td>

                         <td>{item.album}</td>

                         <td>{item.year}</td>

                         <td>{item.title}</td>

                        </tr>            

                      )

                    })

                  }</tbody>

            </table>

                <div >

 

                <button onClick={() => {this.nextplay()}} style={{position:'absolute', top:300, left:60, width:50,height:50,borderRadius:'30%',border: '1px solid #d5d5d5',fontSize:'13px'}}>下一曲</button>

                <audio id="myMp3" src={this.state.mp3file} controls="controls" autoPlay="autoplay" preload="auto" style={{position:'absolute', top:300, left:120, width:600}}></audio>

                </div>

       

      </div>

    )

                }

            }

 

 

mp3歌曲是从后台提取的，以后会做成动态，即数据库提取数据。

还想做一个单曲循环的功能但是还在研究。

本实例还是有bug的，比如说删除了该歌曲，上一曲播放点击下一曲，被删除的仍然可以播放。