audio歌词高亮显示，歌词和歌曲可以点击切换（Vue）

最新推荐文章于 2024-06-15 22:04:49 发布
最新推荐文章于 2024-06-15 22:04:49 发布
阅读量2.1k 收藏 1
点赞数
分类专栏： 音乐，视频
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fengtingYan/article/details/85111683
版权
本文介绍如何在Vue应用中实现音频播放的同时，动态高亮显示歌词，并允许用户通过点击歌词跳转到相应播放位置。核心代码包括HTML和JavaScript部分，详细参考链接已给出。
摘要由CSDN通过智能技术生成

效果：
在这里插入图片描述在这里插入图片描述

歌词显示主要源码:

<link href="rabbit-lyrics/rabbit-lyrics.css" rel="stylesheet" type="text/css" />
<script src="rabbit-lyrics/rabbit-lyrics.js" type="text/javascript"></script>

下载rabbit-lyrics参考 https://mp.csdn.net/mdeditor/85112513#
HTML

<div id="lyrics-1" data-media="#myaudio" data-height="100" style="display: none;"></div>

<div id="audioInfo">
	<audio id="myaudio" :src="song.musicUrlAudio" ref="audio" autoplay @pause="onPause" @play=
最低0.47元/天 解锁文章
宝儿的程序生涯
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
用JavaScript实现简易的网页音乐播放器
DecadeXCosmos的博客
03-22 5541
用JavaScript实现简易的网页音乐播放器 最近疫情在家，利用这段时间开始自学HTML等内容，目前在写自己的个人主页，想用音乐来给自己的主页增添点特色。 一开始单纯用audio标签添加音乐，带上autoplay和loop属性，但在让朋友测试这个页面的时候遇到了问题： 这个问题意味着，Safari在没有用户操作的情况下不会自动播放所插入的音乐，也就是说autoplay是没有用的，但是audio...
IntelliJ IDEA编辑器配置vue高亮显示
10-16
本篇文章将详细讲解如何在IntelliJ IDEA中配置Vue.js的高亮显示，以便在编写Vue代码时获得更好的视觉体验和开发效率。 首先，我们需要确保IntelliJ IDEA已经安装了Vue.js插件。可以通过快捷键Ctrl+Alt+S打开设置，...
JavaScript实现音乐单曲循环
weixin_44589374的博客
07-23 2991
JavaScript实现音乐单曲循环 步骤 1. 创建 audio 对象 var audio= new Audio("./musics/bgm.mp3");//这里的路径写上mp3文件在项目中的绝对路径 2. 获取 audio 长度，audio 的 duration 属性 var duration; duration=audio.duration;//长度单位是秒 3. 定义一个播放audio的函数 function bgm(){ audio.play();//播放 } bgm();//
vue实现歌词滚动_vue 实现一个歌词滚动效果
最新发布
2301_82244279的博客
06-15 427
大厂面试问深度，小厂面试问广度，如果有同学想进大厂深造一定要有一个方向精通的惊艳到面试官，还要平时遇到问题后思考一下问题的本质，找方法解决是一个方面，看到问题本质是另一个方面。还有大家一定要有目标，我在很久之前就想着以后一定要去大厂，然后默默努力，每天看一些大佬们的文章，总是觉得只有再学深入一点才有机会，所以才有恒心一直学下去。
vue audio 播放器（带歌词滚动）
沙鑫741的博客
10-24 6132
 这个是基于element 做的audio播放器弹窗，再打开的时候通过调用这个弹窗的open方法吧数据传入  如：  歌词格式应该与正式格式同，即：时间 歌词 [00:00.00] 作曲 : 高进 [00:01.00] 作词 : 高进 可以通过ref直接找到该节点；  audio 主要有几个 方法： play：播放；pause：暂停  当前时间：currentTime；歌曲时间 ...
Vue3中实现歌词滚动显示效果
m0_64642443的博客
02-02 1173
歌词数据处理首先，我们定义了歌词数据的结构Lyric，并通过函数将歌词字符串解析为该类型的数组。这使得我们能够更方便地处理歌词数据。组件布局在布局方面，我们设计了一个简单的页面结构，包括音乐播放器、CD封面和歌词展示区域。通过ref获取音频元素的引用，并使用watch监听播放位置的变化，实现了歌词的滚动效果。事件处理timeupdate（播放位置变化事件）和canplay（可以开始播放事件）。通过监听播放位置变化，实时更新歌词的高亮位置，并在点击歌词时跳转到对应的播放位置。功能扩展。
vue.js实现歌词高亮滚动与播放同步
tianbushengyinuo的博客
08-27 3143
按照惯例，先上效果图： 1、布局部分 (1)、template部分 <audio ref="player" autoplay ></audio> <div class="detail"> <div class="song-title"> <p ref="song">歌名</p> <p ref="singer">歌手</p> </div> <div class="w
Vue 菜单栏点击切换单个class(高亮)的方法
10-18
在Vue.js中，实现菜单栏点击切换单个class（高亮）的功能是常见的需求，尤其是在构建具有导航功能的Web应用时。以下是一种简单而有效的方法： 首先，我们需要在Vue实例的数据属性中定义一个变量，用于存储当前选中...
vue结合Echarts实现点击高亮效果的示例
08-27
点击高亮效果是指当用户点击图表中的某个元素时，该元素会被高亮显示，以便于用户快速定位和识别。实现点击高亮效果需要使用Echarts的dispatchAction方法，该方法可以触发图表的交互事件。 在上面的示例代码中，...
Vue实现active点击切换方法
08-27
在Vue.js中，实现"active"点击切换方法是常见的需求，通常用于导航菜单、选项卡等组件，使得用户可以通过点击来切换不同的内容显示状态。以下将详细解释如何在循环和非循环情况下实现这一功能。 首先，让我们从循环...
vue实现点击当前标签高亮效果【推荐】
08-27
使用 Vue 实现点击当前标签高亮效果可以通过定义数据、定义标签类名、动态渲染按钮数据、定义点击事件函数等步骤来实现。该效果可以在各种应用程序中使用，提高用户体验和交互性。 知识点： 1. Vue 中的数据定义和...
vue-aplayer：适用于Vue 2.x的易于使用的音乐播放器
02-06
Vue播放器 实现的原型。 产品特点 美丽干净的用户界面 歌词滚动 具有重复和随机播放控件的播放列表 自定义主题颜色/自适应主题颜色 拖放到任何地方 互斥体播放 HLS支持 简易道具和API 无依赖和轻量级（压缩后的16KB） 在您的项目中使用Vue-APlayer？ 用法 < aplayer autoplay :music =" { title: 'secret base~君がくれたもの~', artist: 'Silent Siren', src: 'https://moeplayer.b0.upaiyun.com/aplayer/secretbase.m
html5 audiojs网页音乐播放器-控制音乐开关声音和获取文件名
10-24
html5 audiojs控制音乐开关声音和获取文件名_网页音乐播放器代码
用Vue来实现音乐播放器（十八）：右侧快速入口点击高亮
weixin_30834783的博客
06-12 144
问题一：当我们点击右侧快速入口的时候 被点击的地方高亮 首先我们要知道右侧快速入口是为什么高亮？？因为当watch()监控到scrollY的变化了的时候 将scrollY的值和listHeight相比较 判断scrollY在哪个group区间 从而判断高亮的currentIndex 所以要想高亮 就要让scrollY变化 但点击右侧快速入口的时候 我们没有有scroll方法 直接...
Vue2：网易云播放音乐并实现同步一次显示一行歌词
背心的博客
10-14 3027
Vue2：网易云播放音乐并实现同步一次显示一行歌词
Vue - 音频播放器插件（vue-aplayer）
技术共享，共同进步！
12-14 9657
使用音频播放器插件（vue-aplayer）
使用vue音频播放器（vue-aplayer）详解
热门推荐
qq_42191033的博客
09-05 1万+
预览效果：http://47.115.47.113:9090/home 1、安装&&组件引入： npm install vue-aplayer --save 在需要使用的界面中： import aplayer from "vue-aplayer"; components: { aplayer }, 2、基本使用： <!--music：当前播放的音乐。 list：播放列表 ：showlrc：是否显示歌词--> <aplayer :music="audio[0]" :l
vue3 el-button点击高亮显示再次点击变暗
05-22
你可以借助 Vue3 的指令来实现这个效果。具体实现步骤如下： 1. 创建一个自定义指令 v-click-highlight，用于设置点击高亮效果。 ``` // v-click-highlight.js const clickHighlight = { mounted(el) { el....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值