# wordstudy-uniapp

**Repository Path**: tm_123/wordstudy-uniapp

## Basic Information

- **Project Name**: wordstudy-uniapp
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-07-23
- **Last Updated**: 2025-07-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# scory-audio

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

## 功能特点

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

## 效果展示

![播放器效果图](./static/dist.jpg)

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

## 安装

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

```vue
<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="onEnded"
    @timeupdate="onTimeUpdate"
    @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('暂停播放')
    },
    onEnded() {
      console.log('播放结束')
    },
    onTimeUpdate(e) {
      console.log('播放进度更新', e)
    },
    onError(e) {
      console.error('播放错误', e)
    },
    onSongChange(e) {
      console.log('歌曲切换', e)
    }
  }
}
</script>
```

## 属性说明

| 属性名 | 类型 | 默认值 | 说明 |
|--------|------|--------|------|
| src | String | '' | 音频源地址 |
| cover-image | String | '' | 封面图片地址 |
| title | String | '未知歌曲' | 歌曲标题 |
| artist | String | '未知艺术家' | 艺术家名称 |
| playlist | Array | [] | 播放列表，数组项格式：{src, title, artist, duration} |
| autoplay | Boolean | false | 是否自动播放 |
| loop | Boolean | false | 是否循环播放 |
| start-time | Number | 0 | 初始播放位置（秒） |
| obey-mute-switch | Boolean | false | 是否遵守静音开关 |
| custom-class | String | '' | 自定义样式类名 |

## 事件说明

| 事件名 | 参数 | 说明 |
|--------|------|------|
| play | - | 开始播放时触发 |
| pause | - | 暂停播放时触发 |
| ended | - | 播放结束时触发 |
| timeupdate | {currentTime, duration, progress} | 播放进度更新时触发 |
| error | {errMsg} | 播放错误时触发 |
| songchange | {index, song} | 歌曲切换时触发 |
| seeking | time | 开始拖动进度条时触发 |
| seeked | time | 拖动进度条结束时触发 |

## 方法说明

| 方法名 | 参数 | 说明 |
|--------|------|------|
| play | - | 开始播放 |
| pause | - | 暂停播放 |
| togglePlay | - | 切换播放/暂停状态 |
| seek | time | 跳转到指定时间（秒） |
| setPlaylist | playlist | 设置播放列表 |
| playNext | - | 播放下一首 |
| playPrevious | - | 播放上一首 |
| setPlayMode | mode | 设置播放模式（loop/random/single） |
| setPlaybackRate | rate | 设置播放倍率 |
| destroy | - | 销毁播放器实例 |

## 播放列表格式

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

## 播放模式

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

## 倍速播放

支持以下倍速：
- 0.5x
- 0.8x
- 1.0x
- 1.25x
- 1.5x
- 2.0x

## 样式定制

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

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

```css
.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
- 初始版本发布
- 支持基本音频播放功能
- 支持播放列表管理
- 支持多种播放模式
- 支持倍速播放