| 提交 | 用户 | 时间 | ||
| 820397 | 1 | <template> |
| H | 2 | <div class="flex items-center justify-between px-2 h-72px bg-[var(--el-bg-color-overlay)] b-solid b-1 b-[var(--el-border-color)] b-l-none"> |
| 3 | <!-- 歌曲信息 --> | |
| 4 | <div class="flex gap-[10px]"> | |
| 5 | <el-image src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" class="w-[45px]"/> | |
| 6 | <div> | |
| 7 | <div>{{currentSong.name}}</div> | |
| 8 | <div class="text-[12px] text-gray-400">{{currentSong.singer}}</div> | |
| 9 | </div> | |
| 10 | </div> | |
| 11 | ||
| 12 | <!-- 音频controls --> | |
| 13 | <div class="flex gap-[12px] items-center"> | |
| 14 | <Icon icon="majesticons:back-circle" :size="20" class="text-gray-300 cursor-pointer"/> | |
| 15 | <Icon :icon="audioProps.paused ? 'mdi:arrow-right-drop-circle' : 'solar:pause-circle-bold'" :size="30" class=" cursor-pointer" @click="toggleStatus('paused')"/> | |
| 16 | <Icon icon="majesticons:next-circle" :size="20" class="text-gray-300 cursor-pointer"/> | |
| 17 | <div class="flex gap-[16px] items-center"> | |
| 18 | <span>{{audioProps.currentTime}}</span> | |
| 19 | <el-slider v-model="audioProps.duration" color="#409eff" class="w-[160px!important] "/> | |
| 20 | <span>{{ audioProps.duration }}</span> | |
| 21 | </div> | |
| 22 | <!-- 音频 --> | |
| 23 | <audio v-bind="audioProps" ref="audioRef" controls v-show="!audioProps" @timeupdate="audioTimeUpdate"> | |
| 24 | <source :src="audioUrl"/> | |
| 25 | </audio> | |
| 26 | </div> | |
| 27 | ||
| 28 | <!-- 音量控制器 --> | |
| 29 | <div class="flex gap-[16px] items-center"> | |
| 30 | <Icon :icon="audioProps.muted ? 'tabler:volume-off' : 'tabler:volume'" :size="20" class="cursor-pointer" @click="toggleStatus('muted')"/> | |
| 31 | <el-slider v-model="audioProps.volume" color="#409eff" class="w-[160px!important] "/> | |
| 32 | </div> | |
| 33 | </div> | |
| 34 | </template> | |
| 35 | ||
| 36 | <script lang="ts" setup> | |
| 37 | import { formatPast } from '@/utils/formatTime' | |
| 38 | import audioUrl from '@/assets/audio/response.mp3' | |
| 39 | ||
| 40 | defineOptions({ name: 'Index' }) | |
| 41 | ||
| 42 | const currentSong = inject('currentSong', {}) | |
| 43 | ||
| 44 | const audioRef = ref<Nullable<HTMLElement>>(null) | |
| 45 | // 音频相关属性https://www.runoob.com/tags/ref-av-dom.html | |
| 46 | const audioProps = reactive({ | |
| 47 | autoplay: true, | |
| 48 | paused: false, | |
| 49 | currentTime: '00:00', | |
| 50 | duration: '00:00', | |
| 51 | muted: false, | |
| 52 | volume: 50, | |
| 53 | }) | |
| 54 | ||
| 55 | function toggleStatus (type: string) { | |
| 56 | audioProps[type] = !audioProps[type] | |
| 57 | if (type === 'paused' && audioRef.value) { | |
| 58 | if (audioProps[type]) { | |
| 59 | audioRef.value.pause() | |
| 60 | } else { | |
| 61 | audioRef.value.play() | |
| 62 | } | |
| 63 | } | |
| 64 | } | |
| 65 | ||
| 66 | // 更新播放位置 | |
| 67 | function audioTimeUpdate (args) { | |
| 68 | audioProps.currentTime = formatPast(new Date(args.timeStamp), 'mm:ss') | |
| 69 | } | |
| 70 | </script> | |
