chore(audio): split demo (#2815)

src/packages/__VUE/audio/demo/basic.vue

@@ -0,0 +1,6 @@
+<template>
+  <nut-audio :url="url" loop type="icon"></nut-audio>
+</template>
+<script setup lang="ts">
+const url = '//storage.360buyimg.com/jdcdkh/SMB/VCG231024564.wav';
+</script>

src/packages/__VUE/audio/demo/control.vue

@@ -0,0 +1,47 @@
+<template>
+  <nut-audio
+    :url="url"
+    :loop="false"
+    type="progress"
+    @forward="forward"
+    @fast-back="fastBack"
+    @play="changeStatus"
+    @ended="ended"
+    @change-progress="changeProgress"
+  >
+    <div class="nut-audio-operate-group">
+      <nut-audio-operate type="back">
+        <PlayDoubleBack width="35px" height="35px"></PlayDoubleBack>
+      </nut-audio-operate>
+      <nut-audio-operate type="play">
+        <PlayStart v-if="!playing" width="35px" height="35px"></PlayStart>
+        <PlayStop v-else width="35px" height="35px"></PlayStop>
+      </nut-audio-operate>
+      <nut-audio-operate type="forward">
+        <PlayDoubleForward width="35px" height="35px"></PlayDoubleForward>
+      </nut-audio-operate>
+    </div>
+  </nut-audio>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+import { PlayDoubleBack, PlayDoubleForward, PlayStart, PlayStop } from '@nutui/icons-vue';
+const url = '//storage.360buyimg.com/jdcdkh/SMB/VCG231024564.wav';
+const playing = ref(false);
+const fastBack = () => {
+  console.log('Backwards');
+};
+const forward = (progress: string) => {
+  console.log('Fast forward', 'Current Time' + progress);
+};
+const changeStatus = (status: boolean) => {
+  console.log('Current play status', status);
+  playing.value = status;
+};
+const ended = () => {
+  console.log('Playing ended');
+};
+const changeProgress = (val: string) => {
+  console.log('Change progress', val);
+};
+</script>

src/packages/__VUE/audio/demo/index.vue

@@ -0,0 +1,38 @@
+<template>
+  <Demo>
+    <h2>{{ t('basic') }}</h2>
+    <Basic />
+
+    <h2>{{ t('play') }}</h2>
+    <Play />
+
+    <h2>{{ t('progress') }}</h2>
+    <Progress />
+
+    <h2>{{ t('control') }}</h2>
+    <Control />
+  </Demo>
+</template>
+
+<script setup lang="ts">
+import { useTranslate } from '@/sites/utils';
+import Basic from './basic.vue';
+import Play from './play.vue';
+import Progress from './progress.vue';
+import Control from './control.vue';
+
+const t = useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    play: '语音播放',
+    progress: '进度条展示',
+    control: '自定义操作按钮'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    play: 'Voice Playing',
+    progress: 'Progress',
+    control: 'Custom Control'
+  }
+});
+</script>

src/packages/__VUE/audio/demo/play.vue

@@ -0,0 +1,32 @@
+<template>
+  <nut-audio ref="audioRef" :url="url" :loop="false" type="none">
+    <div class="custom-audio">
+      <div><Voice></Voice></div>
+      <div>{{ duration }}"</div>
+    </div>
+  </nut-audio>
+</template>
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { Voice } from '@nutui/icons-vue';
+const url = '//storage.360buyimg.com/jdcdkh/SMB/VCG231024564.wav';
+const audioRef = ref();
+const duration = ref(0);
+onMounted(() => {
+  setTimeout(() => {
+    duration.value = audioRef.value?.second?.toFixed();
+  }, 500);
+});
+</script>
+<style>
+.custom-audio {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100px;
+  height: 20px;
+  padding: 8px;
+  border: 1px solid rgba(0, 0, 0, 0.6);
+  border-radius: 18px;
+}
+</style>

src/packages/__VUE/audio/demo/progress.vue

@@ -0,0 +1,13 @@
+<template>
+  <nut-audio :url="url" loop type="progress">
+    <nut-space>
+      <nut-audio-operate type="back"></nut-audio-operate>
+      <nut-audio-operate type="play"></nut-audio-operate>
+      <nut-audio-operate type="forward"></nut-audio-operate>
+      <nut-audio-operate type="mute"></nut-audio-operate>
+    </nut-space>
+  </nut-audio>
+</template>
+<script setup lang="ts">
+const url = '//storage.360buyimg.com/jdcdkh/SMB/VCG231024564.wav';
+</script>