【9】前端实习：react audio播放音乐组件（详细完整代码）

详解：

https://www.cnblogs.com/mybilibili/p/10376528.html

 

 

import React, {Component} from 'react';
import {Form,Radio} from 'antd';
import {Link} from 'react-router-dom';
import STATIC from '../../static';
require ('./work.css' );


const FormItem = Form.Item;
class AudioComponent extends Component{
    constructor(props) {
        super(props);
          console.log(props.src)
        this.state = {
            isPlay: false,
            isMuted: false,
            volume: 100,
            allTime: 0,
            currentTime: 0,
            value:10,
            songs: props.src
        };
    }
    //播放按钮
    play=()=>{
        this.setState({
            isPlay: !this.state.isPlay
        })
    }

    millisecondToDate(time) {
        const second = Math.floor(time % 60);
        let minite = Math.floor(time / 60);
        // let hour
        // if(minite > 60) {
        //   hour = minite / 60
        //   minite = minite % 60
        //   return `${Math.floor(hour)}:${Math.floor(minite)}:${Math.floor(second)}`
        // }
        return `${minite}:${second >= 10 ? second : `0${second}`}`;
    }

    controlAudio(type, value) {
        const { id, src } = this.props;
        const audio = document.getElementById(`audio${id}`);
        switch(type) {
            case 'allTime':
                this.setState({
                    allTime: audio.duration
                });
                break;
            case 'play':
                audio.play();
                this.setState({
                    isPlay: true
                });
                break;
            case 'pause':
                audio.pause();
                this.setState({
                    isPlay: false
                });
                break;
            case 'muted':
                this.setState({
                    isMuted: !audio.muted
                });
                audio.muted = !audio.muted;
                break;
            case 'changeCurrentTime':
                this.setState({
                    currentTime: value
                });
                audio.currentTime = value;
                if(value == audio.duration) {
                    this.setState({
                        isPlay: false
                    });
                }
                break;
            case 'getCurrentTime':
                this.setState({
                    currentTime: audio.currentTime
                });
                if (audio.currentTime == audio.duration) {
                    this.setState({
                        isPlay: false
                    });
                }
                break;
            case 'changeVolume':
                audio.volume = value / 100;
                this.setState({
                    volume: value,
                    isMuted: !value
                });
                break;
        }
    }
    render(){
        let {isPlay, isMuted, volume, allTime, currentTime,songs} = this.state;
        let audio_time=currentTime/allTime*100;
        return(
            <div style={{width:'100%',height:'100%',padding:'30px 0px 0px 0px',overflow:'hidden'}}>
                <div className="Personage-introduction">
                    <div className="personal-choices">
                        <Form onSubmit={this.handleSubmit}>
                            <div className="audio_music">
                                <div className="audioBox">
                                    <audio
                                        id={`audio${this.props.id}`}
                                        src={songs}
                                        preload="true"
                                        onCanPlay={() => this.controlAudio('allTime')}
                                        onTimeUpdate={(e) => this.controlAudio('getCurrentTime')}
                                    >
                                        您的浏览器不支持 audio 标签。
                                    </audio>
                                    <div className="auido-photos">
                                        <img onClick={() => this.controlAudio(isPlay ? 'pause' : 'play')} src={this.state.isPlay?STATIC.imgs.music:STATIC.imgs.music} alt=""/>
                                    </div>
                                    <div className="Playback_progress">
                                    <div className="times current">
                                        <h3 className="startTime">{this.millisecondToDate(currentTime)}</h3>
                                        <h3 className="endTime">{this.millisecondToDate(allTime)}</h3>
                                    </div>
                                    <div
                                        className="time speeds"
                                        type="range"
                                        onChange={(value) => this.controlAudio('changeVolume', value)}
                                        value={isMuted ? 0 : volume}
                                    >
                                        <div className="speeds_motion volume"
                                             type="range"
                                             onChange={(value) => this.controlAudio('changeVolume', value)}
                                             value={isMuted ? 0 : volume}
                                             style={{width:audio_time + '%'}}
                                       >
                                       </div>
                                       <div className="speeds-btn volume"
                                           type="range"
                                           step="0.01"
                                           max={allTime}
                                           value={currentTime}
                                           style={{left:audio_time-2+ '%'}}
                                           onChange={(value) => this.controlAudio('changeCurrentTime', value)}>
                                       </div>
                                    </div>
                                    </div>
                                </div>
                            </div>
                        </Form>
                    </div>
                </div>
            </div>
        )
    }
}
export default AudioComponent;

样式：

.audio_music{
	width:437px;
	height:57px;
	margin:5px 0;
}
.auido-photos{
	width:48px;
	height:48px;
	border-radius: 50%;
	display: block;
	float: left; 
	margin-top: 4px;
	cursor: pointer
}
.auido-photos img{width:100%}
.Playback_progress{
	width:354px;
	height: 42px;
	display: block;
	float: left;
	margin-left: 10px;  
	margin-top: 7px;
}
.times{
	width:100%;
	height:25px;
}
.times h3{
	font-size: 14px;
	line-height: 25px;
	font-weight: 600;
}
.times .startTime{
	display: block;
	float: left
}
.times .endTime{
	display: block;
	float: right;
}
.speeds{
	position: relative;
	width:350px;
	height: 10px;
	background: #909090;
	margin-top: 3px;
	border-radius: 12px;
}
.speeds_motion{
	width: 30px;
	height: 100%;
	background: #f1ce39;
	position: absolute;
	border-radius: 12px;
}
.speeds-btn{
	width:20px;
	height: 20px;
	border-radius: 50%;
	background: url("./2.png") center center no-repeat;
	background-size: contain;
	position: absolute;
	left:30%;
	top:-5px;
	z-index: 100;
	cursor: pointer;
}

引用组件：

import React,{Component, Fragment} from 'react'
import AudioComponent from './sound'
import musicoog from './music.ogg'

class music extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isPlay: false,//是否有音频在播放
        }
    }

    /*播放按钮*/
    play(obj) {
        this.setState({
            isPlay: obj
        });
    }

    render() {
        return (
            
            <AudioComponent id={1} src={musicoog} play={this.play.bind(this)} isPlay={this.state.isPlay} />
           
        );
    }
}

export default music;

效果：