更新记录

1.0.0（2025-04-03） 下载此版本

更新日志

v1.0.0 (2024-03-27)

新增功能

• 支持基本音频播放功能
• 支持播放列表管理
• 支持循环、随机、单曲循环三种播放模式
• 支持倍速播放（0.5x-2.0x）
• 支持播放进度控制
• 支持自动加载音频时长
• 支持封面图片显示
• 支持播放列表展开/收起
• 支持自动播放
• 支持自定义开始时间

优化改进

• 优化音频加载逻辑
• 优化播放列表切换体验
• 优化进度条拖动体验
• 优化倍速切换体验

修复问题

• 修复音频时长加载问题
• 修复播放模式切换问题
• 修复进度条拖动卡顿问题

平台兼容性

scory-audio

一个功能强大的音频播放器组件，支持播放列表、倍速播放、多种播放模式等功能。

功能特点

• 支持单曲和播放列表模式
• 支持循环、随机、单曲循环三种播放模式
• 支持倍速播放（0.5x-2.0x）
• 支持播放进度控制
• 支持自动加载音频时长
• 支持封面图片显示
• 支持播放列表展开/收起
• 支持自动播放
• 支持自定义开始时间
• 支持自定义样式
• 支持事件监听

效果展示

播放器包含以下主要部分：

1. 封面图片显示区域
2. 歌曲信息显示（标题、艺术家）
3. 播放进度条
4. 播放控制按钮（播放模式、上一首、播放/暂停、下一首、播放列表）
5. 播放列表展示区域（可展开/收起）
6. 倍速播放控制

安装

1. 在 uni-app 项目中，通过插件市场导入本组件
2. 在页面中引入组件：

<template>
  <scory-audio
    :src="audioSrc"
    :cover-image="coverImage"
    :title="title"
    :artist="artist"
    :playlist="playlist"
    :autoplay="true"
    :loop="false"
    :start-time="0"
    :obey-mute-switch="true"
    @play="onPlay"
    @pause="onPause"
    @ended=""
    @timeupdate=""
    @error="onError"
    @songchange="onSongChange"
  />
</template>

<script>
import scoryAudio from '@/uni_modules/scory-audio/components/scory-audio/scory-audio.vue'

export default {
  components: {
    scoryAudio
  },
  data() {
    return {
      audioSrc: 'https://example.com/audio.mp3',
      coverImage: 'https://example.com/cover.jpg',
      title: '歌曲名称',
      artist: '歌手名称',
      playlist: [
        {
          src: 'https://example.com/audio1.mp3',
          title: '歌曲1',
          artist: '歌手1',
          duration: 180
        },
        {
          src: 'https://example.com/audio2.mp3',
          title: '歌曲2',
          artist: '歌手2',
          duration: 240
        }
      ]
    }
  },
  methods: {
    onPlay() {
      console.log('开始播放')
    },
    onPause() {
      console.log('暂停播放')
    },
    () {
      console.log('播放结束')
    },
    (e) {
      console.log('播放进度更新', e)
    },
    onError(e) {
      console.error('播放错误', e)
    },
    onSongChange(e) {
      console.log('歌曲切换', e)
    }
  }
}
</script>

属性说明

事件说明

方法说明

播放列表格式

[
  {
    src: '音频地址',
    title: '歌曲标题',
    artist: '歌手名称',
    duration: 180 // 音频时长（秒），可选
  }
]

播放模式

• loop: 循环播放
• random: 随机播放
• single: 单曲循环

倍速播放

支持以下倍速：

• 0.5x
• 0.8x
• 1.0x
• 1.25x
• 1.5x
• 2.0x

样式定制

组件支持通过 custom-class 属性添加自定义样式类名，可以覆盖默认样式：

<scory-audio custom-class="my-audio-player" />

.my-audio-player {
  /* 覆盖默认样式 */
  background-color: #f5f5f5;
}

.my-audio-player .cover-image {
  border-radius: 50%;
}

.my-audio-player .progress-bar {
  height: 4px;
}

注意事项

1. 音频源地址需要是可访问的 URL
2. 建议在播放列表中提供音频时长，否则组件会自动加载
3. 在 H5 环境下，某些浏览器可能不支持倍速播放
4. 建议在组件销毁前调用 destroy 方法释放资源
5. 在微信小程序中，音频播放需要用户交互触发
6. 在 iOS 设备上，音频播放可能受到系统限制

常见问题

1. Q: 为什么音频无法自动播放？ A: 大多数浏览器和小程序平台都限制了自动播放，需要用户交互后才能播放。

2. Q: 为什么倍速播放在某些设备上不生效？ A: 倍速播放功能依赖于设备的音频 API 支持，某些设备或浏览器可能不支持。

3. Q: 如何实现后台播放？ A: 在 App 端可以通过配置 manifest.json 实现后台播放，H5 和小程序端需要遵循平台规范。

4. Q: 播放列表切换时出现卡顿怎么办？ A: 可以预加载下一首音频，或者优化音频资源的加载策略。

更新日志

v1.0.0

• 初始版本发布
• 支持基本音频播放功能
• 支持播放列表管理
• 支持多种播放模式
• 支持倍速播放