react.js 实现音乐播放、下一曲、以及删除歌曲(仅播放列表)
2024-09-02 15:48:34
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的,比如说删除了该歌曲,上一曲播放点击下一曲,被删除的仍然可以播放。
最新文章
- PhpStorm 集成 开源中国(oschina.net)的Git项目,提交SVN时注意事项
- git 教程(13)--创建与合并分支
- iOS中事件传递过程
- Oracle 数据泵导入导出
- C++经典编程题#2:大象喝水
- JS常用各种正则表达式
- HTML第八天笔记
- Python 出现需要使用fPIC重新编译的问题
- Aspcms所有标签调用
- Spring mvc Interceptor 解决Session超时配置流程
- 无法关闭的QT程序——思路开阔一下,原来这么简单!
- CodeForces 755C PolandBall and Forest (并查集)
- vuex Loding加载..
- BZOJ1455 罗马游戏 左偏树 可并堆
- excel表格导入数据库数据存在则更新不存在添加
- HAWQ集成Yarn HA作为资源管理服务
- Python3+PyCharm+Django+Django REST framework开发教程
- django -admin 源码解析
- linux分享一:进程全攻略--守护进程(服务)
- Coding(码市)教程(一):基础配置
热门文章
- FHQ-Treap 简介
- SElinux管理
- ASP.NET Core自定义中间件的方式
- 使 Word 段落第一行空出两个字符的位置(段落首行缩进)
- C++11实现的数据库连接池
- CEOI 2019 Day2 T2 魔法树 Magic Tree (LOJ#3166、CF1993B、and JOI2021 3.20 T3) (启发式合并平衡树,线段树合并)
- 【Homebrew】安装
- 通过宏封装实现std::format编译期检查参数数量是否一致
- Android下的Drawable使用
- Hive 组件安装配置