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的,比如说删除了该歌曲,上一曲播放点击下一曲,被删除的仍然可以播放。
 

react.js 实现音乐播放、下一曲、以及删除歌曲(仅播放列表)的更多相关文章

  1. JS实现音乐播放器

    JS实现音乐播放器  前  言            最近在复习JS,觉得音乐播放器是个挺有意思的东西,今天就来用我们最原生的JS写一个小小的音乐播放器~ 主要功能: 1.支持循环.随机播放 2.在播 ...

  2. 原生JS实现音乐播放器!

      前  言            最近在复习JS,觉得音乐播放器是个挺有意思的东西,今天就来用我们最原生的JS写一个小小的音乐播放器~ 主要功能: 1.支持循环.随机播放 2.在播放的同时支持图片的 ...

  3. HTML+纯JS制作音乐播放器

    该篇文章会教你通过JavaScript制作一个简单的音乐播放器.包括播放.暂停.上一曲和下一曲. 阅读本文章你需要对HTML.CSS和Javascript有基本的了解. 话不多说,先上图. emmm. ...

  4. 按ctrl + c 播放下一曲音乐

    ./a.out . #include<stdio.h>#include<stdlib.h>#include<unistd.h>#include<dirent. ...

  5. html5 js控制音乐播放

      <!DOCTYPE HTML><html><head><meta charset="UTF-8"><script lang ...

  6. js 实现音乐播放

    <html><head><title>这种方式支持任何浏览器</title></head><body><div id=&q ...

  7. android音乐播放器开发 SweetMusicPlayer 载入歌曲列表

    上一篇写了播放器的总体实现思路,http://blog.csdn.net/huweigoodboy/article/details/39855653,如今来总结下载入歌曲列表. 代码地址:https: ...

  8. 免费音乐播放器-airplay(网上收集,仅供学习与研究,支持正版)

    AirPlay媒体播放器无需安装,并不会修改注册表,生成桌面快捷方式,加入启动菜单及快速启动. 因此,您只需要下载本软件,保存在任何地方即可使用.使用方便,界面酷炫. 自动下载和显示歌词.专辑封面.汇 ...

  9. C#做音乐播放器时在自动下一曲中报异常的解决办法

    ---------------------- ASP.Net+Unity开发..Net培训.期待与您交流! ---------------------- 在利用Media Player做音乐播放器的时 ...

随机推荐

  1. React Native环境配置、初始化项目、打包安装到手机,以及开发小知识

    1.前言 环境:Win10 + Android 已经在Windows电脑上安装好 Node(v14+).Git.Yarn. JDK(v11) javac -version javac 11.0.15. ...

  2. Badusb 资料整理

    Badusb常用代码整理 一.小马下载执行 适用于常见可执行文件 #include <Keyboard.h> void setup() { //初始化,这里的代码只执行一次 delay(5 ...

  3. 如果Controller里有私有的方法,能成功访问吗?

    目录 背景 原因 cglib代理的锅 换成JDK动态代理呢 参考 背景 写代码的时候,复制粘贴的时候,没注意到方法的属性,就导致了Controller里有了一个私有的方法,然后访问这个接口的时候就报了 ...

  4. PerfView专题 (第三篇):如何寻找 C# 中的 VirtualAlloc 内存泄漏

    一:背景 上一篇我们聊到了如何用 PerfView 去侦察 NTHeap 的内存泄漏,这种内存泄漏往往是用 C 的 malloc 或者 C++ 的 new 分配而不释放所造成的,这一篇我们来聊一下由 ...

  5. SQL SERVER数据库服务器CPU不能全部利用原因分析

    背景 客户凌晨把HIS数据库迁移到配置更高的新服务器,上午业务高峰时应用非常缓慢,严重影响到业务运行.   1.现象 通过SQL专家云实时可视化界面看到大量的绿点,绿点表示会话在等待某项资源,绿点越大 ...

  6. 基于ASP.NET Core 6.0的整洁架构

    大家好,我是张飞洪,感谢您的阅读,我会不定期和你分享学习心得,希望我的文章能成为你成长路上的垫脚石,让我们一起精进. 本节将介绍基于ASP.NET Core的整洁架构的设计理念,同时基于理论落地的代码 ...

  7. 第四十八篇:webpack的基本使用(二) --安装和配置webpack-dev-server插件

    好家伙, 1.webpack中的默认约定 默认的打包入口文件为src  -->index.js 默认的输出文件路径为dist -->main.js 既然有默认,那么就说明肯定能改 2.en ...

  8. openstack中Nova组件简解

    一.Nova组件概述 计算节点通过Nova Computer进行虚拟机创建,通过libvirt调用kvm创建虚拟机,nova之间通信通过rabbitMQ队列进行通信. Nova位于Openstack架 ...

  9. 目标检测-SSD算法从零实现

    1. 几个工具函数 def box_corner_to_center(boxes): """从(左上,右下)转换到(中间,宽度,高度)""" ...

  10. 使用 Spring Boot Admin 监控应用状态

    程序员优雅哥 SpringBoot 2.7 实战基础 - 11 - 使用 Spring Boot Admin 监控应用状态 1 Spring Boot Actuator Spring Boot Act ...