vue3 + tsx 实现音乐播放器

news2024/11/29 6:28:38

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: '周杰伦的歌曲' // 音频文本描述信息
      }
  

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2060010.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

[机器学习]--线性回归算法

线性回归算法原理 线性关系在生活中有很多案例: 摄氏度和华氏度的转化: F C ⋅ 9 5 32 F C \cdot\frac{9}{5}32 FC⋅59​32学科最终成绩的计算: 最终成绩 0.3 \times 平时成绩 0.7 \times 期末成绩 线性回归(Linear regression)就是利用回归函数对一个或多个自变量…

Linux系统编程:IPC通信和网络通信

1.IPC通信 IPC 进程间通信方式&#xff1a; 共享内存是最高效的进程间通信方式 共享内存: 1.是一块&#xff0c;内核预留的空间 2.最高效的通信方式&#xff0c;避免了用户空间到内核空间的数据拷贝 IPC通信方式 ---操作流程类…

BaseCTF2024 WP (主要为Rev)

Rev Rev视频解析&#xff1a;[Rev0&#xff1a;从零开始的逆向生活]BaseCTF2024 Week1 Rev 讲解_哔哩哔哩_bilibili [Week1] You are good at IDA [Week1] UPX mini 脱UPX标准壳&#xff0c;解base64 [Week1] Ez Xor 简单的反向异或&#xff0c;数据动调取一下 #base_xor e…

自开发多功能Vue组件:可定义滚动速度[回到顶部/底部]图标组件的安装与使用!

samdy-chan/vue3-goto-top-or-bottom Preview&#xff08;本组件使用效果预览图&#xff09; 本组件使用过程中的 GIF 动态效果图&#xff08;图片经过压缩&#xff0c;视觉可能会有所模糊&#xff09;&#xff1a; Functional Description&#xff08;功能描述&#xff09; …

关于LLC知识10

在LLC谐振腔中能够变化的量 1、输入电压 2、Rac&#xff08;负载&#xff09; 所以增益曲线为红色&#xff08;Rac无穷大&#xff09;已经是工作的最大极限了&#xff0c;LLC不可能工作在红色曲线之外 负载越重时&#xff0c;增益曲线越往里面 假设&#xff1a; 输入电压…

谷歌反垄断案:美国科技史上最大的垄断诉讼与未来展望

引言 近年来&#xff0c;随着全球科技巨头的迅猛崛起&#xff0c;反垄断诉讼逐渐成为各国监管机构打击科技公司滥用市场地位的重要手段。美国作为全球科技产业的发源地&#xff0c;其对反垄断的关注也从未减弱。2023年&#xff0c;美国联邦法院针对谷歌发起的反垄断诉讼&#…

《Spring Cloud 微服务架构核心组件与 Nacos 配置管理详解》

微服务 1.SpringCloud中的核心组件 Spring Cloud Netflix组件 组件名称作用Eureka服务注册中心RibbonRibbonFeign声明式服务调⽤Hystrix客户端容错保护ZuulAPI服务⽹关 Spring Cloud Alibaba组件 组件名称作用Nacos服务注册中心Sentinel客户端容错保护 Spring Cloud原⽣及…

【python】JS逆向中,手把手教会你如何层层突破瑞数加密

✨✨ 欢迎大家来到景天科技苑✨✨ 🎈🎈 养成好习惯,先赞后看哦~🎈🎈 🏆 作者简介:景天科技苑 🏆《头衔》:大厂架构师,华为云开发者社区专家博主,阿里云开发者社区专家博主,CSDN全栈领域优质创作者,掘金优秀博主,51CTO博客专家等。 🏆《博客》:Python全…

Python中matplotlib使用4

在matplotlib中&#xff0c;可以通过绘制“饼图”来展示各类别在总体中所占的比例。 1 绘制基本“饼图” 通过matplotlib中的pie()函数绘制饼图&#xff0c;代码如图1所示。 图1 绘制基本“饼图”的代码 从图1中可以看出&#xff0c;pie()函数的参数y即为要绘制的数据&#…

微服务的基本理解和使用

目录​​​​​​​ 一、微服务基础知识 1、系统架构的演变 &#xff08;1&#xff09;单体应用架构 &#xff08;2&#xff09;垂直应用架构 &#xff08;3&#xff09;分布式SOA架构 &#xff08;4&#xff09;微服务架构 &#xff08;5&#xff09;SOA与微服务的关系…

Qt 0821作业

一、思维导图

一种针对自然语言文本的提示策略

文章介绍了一种创新的提示策略&#xff0c;旨在利用大型语言模型从自然语言文本中提取业务流程相关信息&#xff0c;例如活动和参与者等&#xff0c;并建立它们之间的关系。通过这种方法&#xff0c;研究人员能够在无需大量数据的情况下实现高质量的信息提取&#xff0c;进而用…

Apache Commons-IO 库

Apache Commons-IO是Apache开源基金组织提供的一组有关IO&#xff08;Input/Output&#xff09;操作的小框架。这个库的主要目的是为了提高IO流的开发效率&#xff0c;减少在进行文件读写、目录遍历等操作时编写的样板代码量。通过使用Commons-IO库&#xff0c;开发者可以更加简…

为一个花店编写一个库存管理程序,花点库存的花用花的名称、颜色、单价和株的数量来表示。(可直接运行)

为一个花店编写一个库存管理程序&#xff0c;花点库存的花用花的名称、颜色、单价和株的数量来表示。 要求&#xff1a; &#xff08;1&#xff09;说明一个结构数组&#xff0c;存储库存的鲜花数据。 &#xff08;2&#xff09;编写一个函数input_data()&#xff0c;输入现…

【学习笔记】卫星网络(NTN)的窄带物联网(NB-IoT)研究 -- 3GPP TR 36.763(四)

目录 8. 后续研究方向的建议 8.1 来自RAN1的建议 8.1.1 针对NR NTN和IoT NTN的共同增强建议 8.1.2 Release-17时间框架内RAN1建议的总结 8.2 来自RAN2的建议 关于卫星网络&#xff08;NTN&#xff09;的窄带物联网&#xff08;NB-IoT&#xff09;/增强型机器类型通信&#…

【论文阅读33】Deep learning optoacoustic tomography with sparse data

Deep learning optoacoustic tomography with sparse data 论文题目:基于稀疏数据的深度学习光声断层扫描 论文链接:Deep learning optoacoustic tomography with sparse data | Nature Machine Intelligence 代码链接:GitHub - ndavoudi/sparse_artefact_unet 数据链接…

鸿蒙Harmony实战开发:Arkts构造函数

构造函数 类声明可以包含用于初始化对象状态的构造函数。 构造函数定义如下&#xff1a; constructor ([parameters]) {// ... } typescript 如果未定义构造函数&#xff0c;则会自动创建具有空参数列表的默认构造函数&#xff0c;例如&#xff1a; class Point {x: numbe…

CH动画制作软件Win/Mac软件安装下载(附安装包)

目录 一、软件概述 1.1 软件简介 1.2 系统要求 二、安装步骤 2.1 下载软件 2.2 安装准备 2.3 安装过程 三、使用教程 3.1 创建新项目 3.2 角色制作 3.3 动画制作 四、高级功能与技巧 4.1 实时渲染技术 4.2 编程支持 4.3 协作与集成 一、软件概述 1.1 软件简介 …

linux 进程D状态的解决思路

同时做了录屏放到B站了&#xff0c;伙伴们视频给个3连支持一下 linux 进程D状态解决思路 1. 问题描述 在Linux系统环境&#xff0c;进程在内核模式下等待I/O完成时通常会进入不间断睡眠状态&#xff0c;此时使用ps或top命令输出的进程显示为D状态。当然我们也可以使用sysrq工具…

基于Python flask的图书借阅管理系统的设计与实现

基于Python Flask的图书借阅管理系统旨在为图书馆或类似机构提供一个高效、便捷的管理平台&#xff0c;覆盖图书借阅的各个环节&#xff0c;帮助管理员和读者更好地管理和使用图书资源。该系统采用Python编程语言和Flask框架进行开发&#xff0c;结合了数据库管理、用户认证、数…