vue3 + tsx 实现音乐播放器

1、效果图

2、文件路径

3、调用方式

audioData为音频的相关数据，lrc为歌词原文（带时间的字符串），举个例子：

const lrc = `
[00:00.06]︿☆我不配☆︿
[au:]飒飒飒飒仨撒撒所所撒撒
[00:00.75]
[00:01.11]演唱：周杰伦
[00:18.40]这街上太拥挤 太多人有秘密
`

 播放器调用方式：

export default defineComponent({
  setup() {
    const audioData = ref<AudioOrigin>({
      resource: {
        name: '我不配-周杰伦', // 资源名称
        url: require('./wobupei.mp3') // 资源访问地址
      },
      // 资源文件内容
      resourceContent: {
        description: '周杰伦的歌曲' // 音频文本描述信息
      }
    })
    const lrc = ref<string>('');
    onMounted(() => {
      lrc.value = lrcData;
    })
    return () => (
      <div style={{
        width: '800px',
        height: '600px'
      }}>
        <AudioPlayer
          audio-data={audioData.value}
          lrc={lrc.value}
        />
      </div>
    )
  }
})

想了解使用的可以评论区评论噢~