更新记录

1.0.1（2025-06-09） 下载此版本

兼容微信小程序

1.0.0（2025-06-08） 下载此版本

初始化

平台兼容性

uni-app

其他

nl-audio-player

音乐播放器

• 支持自定义大小
• 可配置颜色
• 多端兼容

基本使用

<template>
    <view class="wrap">
        <view style="margin: 60rpx; color: #999">实现各种效果</view>

        <!-- 保留播放条，自行调用方法来播放，暂停，切歌（修改播放地址） -->
        <view style="margin: 60rpx">
            <nl-audio-player :src="audioUrl" height="2" size="16" :playerStyle="{}" :show-play-btn="false"></nl-audio-player>
            <view class="audio-control-wrapper">
                <view class="audio-control audio-control-prev">&#xe6a1;</view>
                <view class="audio-control audio-control-switch">&#xe6ad;</view>
                <view class="audio-control audio-control-next">&#xe6a1;</view>
            </view>
        </view>

        <view style="margin: 60rpx; color: #999">配置效果</view>
        <view style="margin: 60rpx 60rpx">
            <nl-audio-player :src="audioUrl" height="2" size="16" :playerStyle="{}" :show-play-btn="false" :show-date="false"></nl-audio-player>
        </view>

        <nl-audio-player :src="audioUrl" date-mode="bottom"></nl-audio-player>

        <nl-audio-player
            :src="audioUrl"
            height="10"
            :bar-bg-style="{ borderRadius: '50px' }"
            :bar-style="{ backgroundColor: 'blue', borderRadius: '50px' }"
            :dot-style="{ width: '30rpx', height: '30rpx', backgroundColor: 'red' }"
        ></nl-audio-player>

        <nl-audio-player :src="audioUrl" date-mode="top" :show-play-btn="false"></nl-audio-player>

        <nl-audio-player ref="audioRef" :src="audioUrl" :duration="16" loop date-mode="side" :play-btn-style="{ backgroundColor: '#409eff' }" :date-style="{ color: '#409eff' }"></nl-audio-player>

        <view style="display: flex">
            <button type="default" @click="handlePlay">播放</button>
            <button type="default" @click="handlePause">暂停</button>
            <button type="default" @click="handleAdd">增加音量</button>
            <button type="default" @click="handleReduce">减少音量</button>
        </view>
        <view style="display: flex; margin-top: 10px">
            <button type="default" @click="handlePlaybackBate(0.5)">0.5倍数</button>
            <button type="default" @click="handlePlaybackBate(1)">正常</button>
            <button type="default" @click="handlePlaybackBate(2)">2倍数</button>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                audioUrl: 'https://audio.lzkp/clock.mp3', // 使用自己的音频地址
                volume: 1,
            }
        },

        methods: {
            handlePlay() {
                this.$refs.audioRef.play()
            },
            handlePause() {
                this.$refs.audioRef.pause()
            },
            handleAdd() {
                this.volume = Number((this.volume + 0.1).toFixed(1))
                this.$refs.audioRef.setVolume(this.volume)
            },
            handleReduce() {
                this.volume = Number((this.volume - 0.1).toFixed(1))
                this.$refs.audioRef.setVolume(this.volume)
            },
            handlePlaybackBate(val) {
                this.$refs.audioRef.setPlaybackRate(val)
            },
        },
    }
</script>
<style>
    @font-face {
        font-family: 'icon';
        src: url('//at.alicdn.com/t/c/font_4943412_hwr994uqfdf.woff2?t=1749392833400') format('woff2'), url('//at.alicdn.com/t/c/font_4943412_hwr994uqfdf.woff?t=1749392833400') format('woff'),
            url('//at.alicdn.com/t/c/font_4943412_hwr994uqfdf.ttf?t=1749392833400') format('truetype');
    }

    .audio-control-wrapper {
        margin-top: 20rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        font-family: 'icon' !important;
    }

    .audio-control {
        font-size: 62rpx;
        line-height: 1;
        padding: 16rpx;
        color: #409eff;
        font-size: 80rpx;
    }

    .audio-control-prev {
        transform: rotate(180deg);
    }

    .audio-control-switch {
        font-size: 80rpx;
        margin: 0 100rpx;
    }
</style>

Props

Methods