更新记录

1.0.0（2026-01-19） 下载此版本

平台兼容性

uni-app(4.87)

音频播放器组件

项目简介

基于 UniApp 和 Vue3 开发的多功能音频播放器组件，具有CD旋转动画、进度控制、循环播放等功能，适用于移动端跨平台音频播放应用开发。提供了美观的UI界面和完整的音频控制功能，支持H5和小程序环境。

功能特性

• CD旋转动画效果，播放时CD转动，暂停时停止
• 音频进度条控制，支持实时拖拽调节播放进度
• 播放/暂停功能切换
• 循环播放模式控制
• 实时显示当前播放时间和总时长
• 适配H5和小程序环境的不同音频API
• 美观的UI界面设计，包含专辑封面、标题和描述

技术栈

• 前端框架: UniApp + Vue3
• UI 框架: 原生 UniApp 组件
• 编程语言: JavaScript、Vue Template
• 条件编译: 使用 #ifdef H5 和 #ifndef H5 适配不同平台

安装使用

1. 安装依赖

npm install

2. 在项目中使用组件

<template>
  <view class="container">
    <view v-if="content">
      <!-- 音频信息展示 -->
      <view class="audio-info">
        <view class="cd-wrapper">
          <view class="cd-outer">
            <view :class="['cd', isPlaying ? 'rotate' : '']">
              <image class="cd-img" :src="content.logo"></image>
            </view>
          </view>
        </view>
        <view class="audio-title">
          <text class="audio-title-bg">{{content.title}}</text>
        </view>
        <view class="audio-desc">
          <rich-text :nodes="content.desc"></rich-text>
        </view>
      </view>

      <!-- 播放控制器 -->
      <view class="player-controls">
        <view class="progress-bar">
          <text class="time current">{{currentTime}}</text>
          <slider 
            class="progress" 
            block-size="12" 
            activeColor="#4080FF" 
            backgroundColor="#eee" 
            :value="progress"
            @changing="onSliderChanging"   
            @change="onSliderChange"
            :disabled="!audioLoaded" 
          />
          <text class="time total">{{duration}}</text>
        </view>

        <view class="control-buttons">
          <view class="loop-button">
            <image 
              class="btn-loop" 
              :src="isLoop ? '/static/loop.png' : '/static/loop1.png'" 
              mode="aspectFit" 
              @tap="toggleLoop"
            ></image>
          </view>
          <view class="play-button">
            <image 
              class="btn-play" 
              :src="isPlaying ? '/static/pause.png' : '/static/play.png'" 
              mode="aspectFit" 
              @tap="togglePlay"
            ></image>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

// 播放状态
const isPlaying = ref(false)
const progress = ref(0)
const duration = ref('00:00')
const currentTime = ref('00:00')
const isLoop = ref(true)
const audioLoaded = ref(false)

// 音频内容信息
const content = ref({
  id: 'local-audio-1',
  logo: '/static/logo.png',
  title: '音频示例',
  desc: '<p>音频播放演示</p>',
  path: '/static/audio.mp3', // 本地音频文件路径
  duration: 230, // 音频长度（秒）
  collectFlag: false,
})

// 判断运行环境
// #ifdef H5
const audioContext = ref(null)
// #endif

// #ifndef H5
const bgAudioManager = ref(null)
// #endif

const dragging = ref(false) // 是否正在拖动进度条
const totalDuration = ref(0) // 音频总时长（秒）

// ... 其他方法实现
</script>

<style>
/* 样式定义 */
.wrap_audio{background: #F7FBFC url("/static/body_bg.png") repeat-x center 0; background-size:100%;padding: 40rpx;}
.player-controls{margin: 60rpx 0;}
.player-controls .progress-bar{display: flex;align-items: center;margin-bottom: 40rpx;}
.player-controls .progress-bar .time{font-size: 24rpx;color: #000;width: 80rpx;}
.player-controls .progress-bar .progress{flex: 1;margin: 0 20rpx;}
.player-controls .control-buttons{display: flex;justify-content: center;align-items: center;gap: 60rpx;position: relative;}
.player-controls .control-buttons .loop-button {position: absolute; left: 20rpx; top: 50%; transform: translateY(-50%);}
.player-controls .control-buttons image{width: 60rpx;height: 60rpx;}
.player-controls .control-buttons image.btn-play{width: 100rpx;height: 100rpx;}

.audio-info .cd-wrapper {display: flex;justify-content: center;margin: 40rpx 0 20rpx 0;}
.audio-info .cd-outer {
  width: 560rpx;
  height: 560rpx;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(201,221,224, 0.6) 60%, rgba(255, 224, 233, 0.3) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.audio-info .cd {width: 350rpx;height: 350rpx;border-radius: 50%;border: 90rpx solid #222;display: flex;align-items: center;justify-content: center;background: #fff;box-shadow: 0 0 30rpx #ccc;}
.audio-info .cd-img {width: 350rpx;height: 350rpx;border-radius: 50%;object-fit: cover;}

.rotate {
  animation: rotateCD 12s linear infinite;
}

@keyframes rotateCD {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.audio-info .audio-title{text-align: center; font-size: 36rpx; font-weight: bold; margin: 20rpx 0 10rpx 0; color: #222;display: block;}
.audio-info .audio-title .audio-title-bg {position: relative;display: inline-block;font-size: 32upx;}
.audio-info .audio-title .audio-title-bg::after {content: '';position: absolute;z-index: 0;bottom: 0.15em;left: 0; width: 100%;height: 16upx;background: linear-gradient( 270deg, #344BEA 0%, #0983FB 100%);opacity: 0.7;border-radius: 1em;}
.audio-info .audio-desc{color: #444;font-size: 26rpx;margin: 0 0 20rpx 0;line-height: 1.8;}

.fixed-bottom_wrap {
  padding-bottom: 200px;
}
</style>

组件属性

事件

文件结构

项目包含以下主要文件：

• pages/index/index.vue: 主页面，实现了音频播放器的完整功能
• static/: 静态资源目录，存放音频文件、图片等
  • loop.png: 循环播放图标
  • loop1.png: 非循环播放图标
  • play.png: 播放图标
  • pause.png: 暂停图标
  • logo.png: 音频专辑封面图

开发环境

• HBuilderX（官方推荐IDE）
• Node.js（用于依赖管理）
• UniApp 运行环境（H5、小程序、App等）

运行项目

1. 使用 HBuilderX 打开项目
2. 右键项目根目录
3. 选择 "运行" -> "运行到浏览器" 或 "运行到 H5"
4. 或者点击顶部工具栏的绿色三角形运行按钮

技术约束

• 适用于 Vue3 版本的 UniApp 项目
• 音频文件需放置在static目录下以确保小程序环境可访问
• 需要根据不同平台（H5/小程序）使用相应的音频API

已知问题

• 小程序环境下音频资源必须放在服务器上，不能使用本地文件路径
• 部分平台对音频格式支持有限制，建议使用mp3格式

更新日志

v1.0.0

• 初始版本发布
• 支持音频播放/暂停功能
• 支持进度条拖拽控制
• 支持循环播放模式切换
• 支持CD旋转动画效果
• 适配H5和小程序环境