开发预览更新于 2026-05-10

AudioPlayer 音频播放器

紧凑的音频播放器；传 peaks 数组渲染波形条，省略时退化为简单进度条。点击进度区即可 seek。

基础用法

预先用后端 / 离线流程计算波形 peaks（绝对幅度归一化到 0–1 的数组），传入 peaks 即可获得 SoundCloud 风格的波形进度条。不传则退化为细横条。

背景视口

src/App.vue

<script setup lang="ts">
import { CfAudioPlayer } from '@chufix-design/vue';

const peaks: number[] = Array.from({ length: 160 }, (_, i) => {
  const a = Math.sin(i * 0.18) * 0.4;
  const b = Math.sin(i * 0.07) * 0.35;
  return Math.min(1, Math.abs(a + b) + 0.15 + Math.random() * 0.05);
});
</script>
<template>
  <CfAudioPlayer
    src="https://commondatastorage.googleapis.com/codeskulptor-demos/DDR_assets/Sevish_-__nbsp_.mp3"
    :peaks="peaks"
  />
</template>

<script setup>
import { CfAudioPlayer } from '@chufix-design/vue';

const peaks= Array.from({ length: 160 }, (_, i) => {
  const a = Math.sin(i * 0.18) * 0.4;
  const b = Math.sin(i * 0.07) * 0.35;
  return Math.min(1, Math.abs(a + b) + 0.15 + Math.random() * 0.05);
});
</script>
<template>
  <CfAudioPlayer
    src="https://commondatastorage.googleapis.com/codeskulptor-demos/DDR_assets/Sevish_-__nbsp_.mp3"
    :peaks="peaks"
  />
</template>

import { CfAudioPlayer } from '@chufix-design/react';

export default function Demo() {
  const peaks: number[] = Array.from({ length: 160 }, (_, i) => {
    const a = Math.sin(i * 0.18) * 0.4;
    const b = Math.sin(i * 0.07) * 0.35;
    return Math.min(1, Math.abs(a + b) + 0.15 + Math.random() * 0.05);
  });
  return (
    <>
      <CfAudioPlayer src="https://commondatastorage.googleapis.com/codeskulptor-demos/DDR_assets/Sevish_-__nbsp_.mp3" peaks={peaks} />
    </>
  );
}

import { CfAudioPlayer } from '@chufix-design/react';

export default function Demo() {
  const peaks= Array.from({ length: 160 }, (_, i) => {
    const a = Math.sin(i * 0.18) * 0.4;
    const b = Math.sin(i * 0.07) * 0.35;
    return Math.min(1, Math.abs(a + b) + 0.15 + Math.random() * 0.05);
  });
  return (
    <>
      <CfAudioPlayer src="https://commondatastorage.googleapis.com/codeskulptor-demos/DDR_assets/Sevish_-__nbsp_.mp3" peaks={peaks} />
    </>
  );
}

API

Props

属性	类型	默认	说明
`src`	`string`	—	音频源
`peaks`	`number[]`	—	归一化波形
`autoplay` / `loop` / `muted`	`boolean`	`false`	原生属性
`preload`	`'auto' \| 'metadata' \| 'none'`	`'metadata'`

Events

事件	载荷	说明
`play` / `pause` / `ended`	—
`timeupdate`	`(time, duration)`	当前播放进度
`volumechange`	`(volume, muted)`