CreateUI

# 八音盒

来源

完成个人博客时定制背景音乐的播放组件。

# 基础用法

未来音乐盒的 UI 多多改善

配置src传入音乐资源，v-model为必填项。

展示
代码

# 高级用法

# 主体颜色

配置color来设置主体颜色，包括加载条，按钮，边框。

展示
代码

# 背景颜色

配置color来设置主体颜色，包括进度条，按钮，边框。

展示
代码

# 进度条长度

配置width来设置进度条的长度。

展示
代码

# Ref 引用

注意区别

refer是内部封装的<audio>标签的引用，考虑到多个音乐盒存在时内部audio的冲突。 而要使用音乐盒部的函数，需要将ref作用于音乐盒本身。

配置refer来设置audio的ref，以便操作元素。

展示
代码

# Audio 上下文

通过getAudioCtx来获取音频的上下文环境。






 



<ct-musicbox
  src="assets/gypsophila.mp3"
  name="明月星辰可见否"
  v-model="isPlay"
  refer="audioRef"
  ref="audioboxRef"
>
</ct-musicbox>

this.$refs.audioboxRef.getAudioCtx(); // [object AudioContext]

# Audio 分析器

通过getAudioAnalyser来获取音频的分析器，通过分析器可提取音频数据，从而进行音频可视化。






 



<ct-musicbox
  src="assets/gypsophila.mp3"
  name="明月星辰可见否"
  v-model="isPlay"
  refer="audioRef"
  ref="audioboxRef"
>
</ct-musicbox>

this.$refs.audioboxRef.getAudioAnalyser();

# 配置

# 属性

参数 信息 默认 必需 类型
v-model 双向绑定，可控制音乐播放 false true Boolean
src 播放的音乐资源 null true ——
name 音乐名 "Your music name" false String
color 按钮，进度条，边框的颜色 #5659e8 false String
bgColor 背景颜色 #efefef false String
width 进度条长度 100(px) false Number
refer 内部audio的ref audio false String

# 事件

事件 信息
handleEnded 音乐播放结束

# Ref

组件中的函数，直接通过this.$refs.audio.FunctionName()调用

函数 信息
getAudioCtx 获取 Audio 上下文
getAudioAnalyser 获取 Audio Api 创建的分析器

←