更新记录

1.0.1（2025-11-25） 下载此版本

支持微信小程序，其他自测，注意纯逻辑，无UI，进度条样式需自行实现，组件拖动事件接受1~100

1.0.0（2025-11-25） 下载此版本

音乐播放器控制，返回进度条播放进度，可拖动进度条跳跃播放，返回播放状态

平台兼容性

uni-app(4.24)

mx-music-com

基础音乐控制，需组件式使用，可拖动，返回播放状态，返回进度，使用mixins引入调试即可

<template>
    <up-popup :show="show" @close="close" :safeAreaInsetBottom="false" closeable mode="center" bgColor="#ffffff" round="0">
        <view class="page-content">
            <!-- 音乐组件 长条形 -->
            <view class="s-flex-center" style="height: 88rpx;">
                <text>音频播放器</text>
            </view>
            <view class="music-content  s-flex s-a-i-c">
                <view class="s-flex-center iconfont" style="width: 100rpx;font-size: 80rpx;color: #19C4B8;"
                    @click="togglePlay">
                    <text v-if="isPlaying">&#xe60c;</text>
                    <text v-else>&#xe61d;</text>
                </view>
                <view class="" style="flex: 1;height: 100%;">
                    <view class="" v-show="isPlaying" style="width: 600rpx;">
                        <up-notice-bar icon="" bgColor="#ffffff00" color="#333333" :speed="80"
                            :text="info.name"></up-notice-bar>
                    </view>
                    <view class="s-p-l-30" style="line-height: 72rpx;" v-show="!isPlaying">
                        <text class="s-no-wrap u-line-1" v-show="!isPlaying">{{info.name}}</text>
                    </view>
                    <!-- 播放进度条，绑定值和拖动事件 -->
                    <up-slider v-model="currentPercentage" :min="0" :max="100" :step="1" activeColor="#19C4B8"
                        @changing="handleSliderChanging" @change="handleSliderChange"></up-slider>
                    <!-- 时间 -->
                    <view class="s-flex s-j-c-s-b s-p-l-20 s-p-r-20 s-f-s-24">
                        <text>{{ formatTime(currentTime)}}</text>
                        <text>{{ formatTime(duration) }}</text>
                    </view>
                </view>
            </view>
            <view class="s-flex-center"
             hover-class="s-hover-bj-999"
             style="height: 88rpx;" @click="close">
                <text>取消</text>
            </view>
        </view>
    </up-popup>
</template>
<script>
    import {
        propsMixin
    } from '../../mixins/popup-show';
    import {
        musicMixin
    } from '@/mixins/music';

    export default {
        mixins: [musicMixin, propsMixin],
        data() {

        },
        mounted() {
            this.$nextTick(()=>{
                setTimeout(()=>{
                    this.togglePlay()
                })
            })
        },
        unmounted() {
            this.togglePlay()
            this.resetPlayer()
        }
    }
</script>
<style lang="scss" scoped>
    /* ... 样式不变 ... */
    .music-content {
        border-radius: 10rpx;
        padding: 10rpx 0;
        background-color: #19C4B820;
    }
    .cover-image {
        width: 160rpx;
    }

    .page-content {
        width: 710rpx;
        min-height: 200rpx;
    }
</style>