react-common-use-components/dist/common/AudioPlayer/AudioPlayer.js

A React mobile commonly used component library

"use strict";
var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var react_1 = __importStar(require("react"));
var ProgressBar_1 = __importDefault(require("../ProgressBar/ProgressBar"));
var PauseIcon_1 = __importDefault(require("../../assets/svgs/PauseIcon"));
var AudioPlayIcon_1 = __importDefault(require("../../assets/svgs/AudioPlayIcon"));
var FlexBox_1 = __importDefault(require("../FlexBox/FlexBox"));
var FastBackwardIcon_1 = __importDefault(require("../../assets/svgs/FastBackwardIcon"));
var FastForwardIcon_1 = __importDefault(require("../../assets/svgs/FastForwardIcon"));
var MuteIcon_1 = __importDefault(require("../../assets/svgs/MuteIcon"));
var VoiceIcon_1 = __importDefault(require("../../assets/svgs/VoiceIcon"));
var MuteCancelIcon_1 = __importDefault(require("../../assets/svgs/MuteCancelIcon"));
var AudioPlayer = function (_a) {
    var url = _a.url, playIcon = _a.playIcon, pauseIcon = _a.pauseIcon, forwardIcon = _a.forwardIcon, progressBarConfig = _a.progressBarConfig, backwardIcon = _a.backwardIcon, timeTextStyle = _a.timeTextStyle;
    var _b = (0, react_1.useState)(false), played = _b[0], setPlayed = _b[1];
    var audioRef = (0, react_1.useRef)(null);
    var _c = (0, react_1.useState)(0), currentTime = _c[0], setCurrentTime = _c[1];
    var _d = (0, react_1.useState)(0), duration = _d[0], setDuration = _d[1];
    var _e = (0, react_1.useState)(false), isMuted = _e[0], setIsMuted = _e[1];
    var _f = (0, react_1.useState)(50), volume = _f[0], setVolume = _f[1];
    var _g = (0, react_1.useState)(false), showVolume = _g[0], setShowVolume = _g[1];
    (0, react_1.useEffect)(function () {
        var _a, _b;
        if (played) {
            (_a = audioRef.current) === null || _a === void 0 ? void 0 : _a.play().catch(function (err) {
                console.log("播放失败");
            });
        }
        else {
            (_b = audioRef.current) === null || _b === void 0 ? void 0 : _b.pause();
        }
    }, [played]);
    (0, react_1.useEffect)(function () {
        if (audioRef.current) {
            audioRef.current.addEventListener("canplay", function () {
                var _a;
                console.log("音频可以开始播放");
                setDuration(((_a = audioRef.current) === null || _a === void 0 ? void 0 : _a.duration) || 0);
            });
            return function () {
                // 清理事件监听器
                audioRef.current.removeEventListener("canplay", function () { });
            };
        }
    }, []);
    (0, react_1.useEffect)(function () {
        if (audioRef.current) {
            audioRef.current.muted = isMuted;
        }
    }, [isMuted]);
    var totalTime = (0, react_1.useMemo)(function () {
        var second = Math.floor(duration);
        var remainder = Math.round(second % 60);
        var minute = Math.round((second - remainder) / 60);
        var remainder2 = remainder < 10 ? "0" + remainder.toString() : remainder;
        return minute + ":" + remainder2;
    }, [duration]);
    var percent = (0, react_1.useMemo)(function () {
        return duration !== 0 ? Math.round((currentTime / duration) * 100) : 0;
    }, [currentTime, duration]);
    var _currentTime = (0, react_1.useMemo)(function () {
        var second = Math.floor(currentTime);
        var remainder = Math.round(second % 60);
        var minute = Math.round((second - remainder) / 60);
        var remainder2 = remainder < 10 ? "0" + remainder.toString() : remainder;
        return minute + ":" + remainder2;
    }, [currentTime]);
    //后退
    var backward = function () {
        setPlayed(true);
        if (audioRef.current) {
            audioRef.current.currentTime = Math.max(0, audioRef.current.currentTime - 2);
        }
    };
    //快进
    var forward = function () {
        setPlayed(true);
        if (audioRef.current) {
            audioRef.current.currentTime = Math.min(audioRef.current.duration, audioRef.current.currentTime + 2);
        }
    };
    console.log(isMuted);
    return (react_1.default.createElement("div", { style: { width: "100%", backgroundColor: "rgba(255,255,255,0.5)" } },
        react_1.default.createElement("audio", { ref: audioRef, src: url, onTimeUpdate: function () {
                setCurrentTime(audioRef.current.currentTime);
            }, onEnded: function () { return setPlayed(false); } }),
        react_1.default.createElement(FlexBox_1.default, { style: { width: "100%" } },
            played ?
                react_1.default.createElement(FlexBox_1.default, { onClick: function () { return setPlayed(false); } }, pauseIcon ? pauseIcon : react_1.default.createElement(PauseIcon_1.default, { style: { width: "2rem", height: "2rem" } }))
                :
                    react_1.default.createElement(FlexBox_1.default, { onClick: function () { return setPlayed(true); } }, playIcon ? pauseIcon : react_1.default.createElement(AudioPlayIcon_1.default, { style: { width: "2rem", height: "2rem" } })),
            react_1.default.createElement(FlexBox_1.default, { onClick: backward }, backwardIcon ? backwardIcon : react_1.default.createElement(FastBackwardIcon_1.default, { style: { width: "2rem", height: "2rem" } })),
            react_1.default.createElement(ProgressBar_1.default, { onChange: function (percent) {
                    setPlayed(true);
                    var newTime = Math.floor((percent / 100) * duration);
                    if (audioRef.current) {
                        setCurrentTime(newTime);
                        audioRef.current.currentTime = newTime;
                    }
                }, trackBgColor: progressBarConfig === null || progressBarConfig === void 0 ? void 0 : progressBarConfig.trackBgColor, barBgColor: progressBarConfig === null || progressBarConfig === void 0 ? void 0 : progressBarConfig.barBgColor, barWidth: (progressBarConfig === null || progressBarConfig === void 0 ? void 0 : progressBarConfig.barWidth) || "6rem", barHeight: progressBarConfig === null || progressBarConfig === void 0 ? void 0 : progressBarConfig.barHeight, percent: percent }),
            react_1.default.createElement(FlexBox_1.default, { style: { marginLeft: "0.5rem" }, onClick: forward }, forwardIcon ? forwardIcon : react_1.default.createElement(FastForwardIcon_1.default, { style: { width: "2rem", height: "2rem" } })),
            react_1.default.createElement("div", { style: { position: "relative" } },
                react_1.default.createElement(FlexBox_1.default, { style: { margin: "0.25rem" } },
                    isMuted ? react_1.default.createElement(MuteIcon_1.default, { onClick: function () { setIsMuted(false); }, style: { width: "2rem", height: "2rem", margin: "0.25rem" } }) :
                        react_1.default.createElement(MuteCancelIcon_1.default, { onClick: function () { setIsMuted(true); }, style: { width: "2rem", height: "2rem", margin: "0.25rem" } }),
                    react_1.default.createElement(VoiceIcon_1.default, { onClick: function () { setShowVolume(!showVolume); }, style: { width: "2rem", height: "2rem", marginLeft: "0.5rem" } })),
                showVolume && react_1.default.createElement(FlexBox_1.default, { style: { position: "absolute", top: "-1.5rem", left: "-1rem" } },
                    react_1.default.createElement("div", { style: { color: "#FFFFFF", fontSize: "1rem", marginRight: "0.5rem" } }, volume),
                    react_1.default.createElement(ProgressBar_1.default, { onChange: function (volume) {
                            setVolume(volume);
                        }, barWidth: "5rem", barHeight: "0.5rem", percent: volume }))),
            react_1.default.createElement("div", { style: __assign({ color: "#B3B3B3" }, timeTextStyle) }, totalTime ? _currentTime + '/' + totalTime : ''))));
};
exports.default = AudioPlayer;