原生js实现音乐播放器功能，可以实时显示歌词并且高亮当前句

最新推荐文章于 2024-05-13 16:33:00 发布
最新推荐文章于 2024-05-13 16:33:00 发布
阅读量9.4k 收藏 7
点赞数
分类专栏： 常见网页特效 文章标签： js音乐播放器带歌词
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35765126/article/details/78608467
版权

最近在做项目，总结一下学到的知识，
首先就是一个简单的音乐播放器。可以显示歌词，并且突出显示当前播放的这一句。
但是歌词必须是要转码成utf-8的，不然是乱码，后面提供我淘到的转码工具，非常简单，把下载的lrc格式的歌词文件拖到这个软件上他就提醒你转码完毕，这时候就可以用了。
html，css，js我都放上去，js放到最后，前面两个我就不解释了，各位看官如果想直接看js就拖到最后吧。这是从项目里面提取的代码，用webpack，所以引用什么的就劳烦自己加上去~，具体功能请看html，有的功能还没有做，做了再更新，，，想了想代码还是放在github吧。。。代码有点长na~
简单粗暴先看一下效果图。
一首分手快乐送给大家
这里写图片描述
这里写图片描述
我的资源页，不知道可不可以打开（(/ □ )）传送门

徐行莫停
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 9
    评论
专栏目录
js制作简易音乐播放器（歌词同步显示）
Zoey_J的博客
04-28 4103
打算自己做一个音乐播放网站，所以先提前试试水，看看单一个音乐播放器怎么做，慢慢地总算把基本功能都做出了，但不完美的是进度条和音量的还没加上，先这样吧，后期再慢慢完善吧~ 先看效果图： html部分 <!--歌词存放区--> <textarea name="lrc" class="lrc-container" rows="15" cols="50" style="display...
如何用Vue3构建一个交互式音乐播放器
最新发布
ScriptEcho的博客
06-12 623
本文由平台提供技术支持。
音视频播放对应文字同步高亮且滚动到指定位置(scrollTop)
younger_z的专栏
07-01 1016
需求 播放音频或者视频，对应文字高亮展示以及滚动到该位置，红色方框是一个scroll 数据 代码 <div class="col-sm-12 float-none new-content" height="652"> //some infos <input type="hidden" paraid="1" idindex="2" starttime...
最全使用 HTML、CSS 和 JS 创建在线音乐播放器(含免费完整源码)，字节面试编程题
2401_84537540的博客
05-13 729
别在网上瞎学了，我最近也做了一些资源的更新，只要你是我的粉丝，这期福利你都可拿走。我先来介绍一下这些东西怎么用，文末抱走。这是我花了几天的时间去把Python所有方向的技术点做的整理，形成各个领域的知识点汇总，它的用处就在于，你可以按照上面的知识点去找对应的学习资源，保证自己学得较为全面。最近我才对这些路线做了一下新的更新，知识体系更全面了。
vue.js实现歌词高亮滚动与播放同步
tianbushengyinuo的博客
08-27 3133
按照惯例，先上效果图： 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
JavaScript-歌词展示与音乐同步
m0_51315555的博客
09-29 2902
一、歌词数据 1、歌词加载 2、把歌词解析为JS对象 3、把搜集好的歌词信息，展示到页面上 4、整体代码 二、歌词与音乐同步 1、歌词和音乐展示 2、歌词和音乐同步，当前行高亮，随播放滚动
JS实现歌词播放，正则匹配歌词，时间
qq_51660806的博客
07-18 380
JS实现歌词播放，正则匹配歌词，时间
JavaScript 练手小技巧：音乐播放器的歌词显示
九天翔龙的技术博客
07-27 1374
暑假了，还是不能让自己闲着，学点自己感兴趣的知识，写点自己喜欢的代码。今天写了一个播放器的雏形，带歌词显示。没去自定义播放器，主要是写歌词显示效果。效果图如下：首先当然是要准备一个 mp3 文件。
两种简单实现菜单高亮显示的JS类代码
10-29
近期在写一个博客管理后台的前端,涉及在同一页面两种高亮显示当前菜单的需求.
vue使用原生js实现滚动页面跟踪导航高亮的示例代码
10-17
在Vue.js应用中，实现滚动页面跟踪导航高亮的功能，可以极大地提升用户体验，使得用户能够清晰地看到当前浏览内容所在的导航位置。以下是如何使用原生JavaScript来实现这一功能的详细步骤： 首先，我们需要分析HTML...
基于JQuery和原生JavaScript实现网页定位导航特效
10-20
总结来说，结合jQuery和原生JavaScript实现的网页定位导航特效可以提供良好的用户体验，使用户能够轻松浏览页面各个部分。通过监听滚动事件并根据当前位置调整菜单项的样式，我们可以创建出响应式的导航效果。无论...
原生javascript实现Tab选项卡切换功能
10-24
虽然jQuery提供了许多便利的插件来实现这一功能，但为了减少页面加载时间和提高性能，我们可以直接利用JavaScript的原生功能来创建选项卡切换。 首先，我们需要理解如何通过JavaScript获取具有特定类名的元素。在...
JS制作音乐播放器，带歌词同步
SpringWalker
10-12 2563
制作播放器的代码如下，关键部分已经添加了注释。
js 实现音乐播放器中歌词与歌曲同步的原理
David_jiahuan的博客
06-01 6839
首先知道歌词文件的后缀名是 .lrc （lyric歌词的缩写）；接着知道.lrc 文件的一般格式是 [** : ** . ***] 歌词内容（时间的tag标签组成）：===========================================================知道上面这些后，就不难知道怎么实现歌词和歌曲同步了：    1、首先逐行解析每句歌词；    2、利用正则表达式等方...
阿里架构师带你使用原生JS实现音乐播放器
weixin_42686892的博客
02-24 565
音乐播放器 播放控制 播放进度条控制 歌词显示及高亮 播放模式设置 播放器属性归类 按照播放器的功能划分，对播放器的属性和DOM元素归类，实现同一功能的元素和属性保存在同一对象中，便于管理和操作 const control = { //存放播放器控制 play: document.querySelector('#myplay'), ... index: 2,//当前播放歌曲序号 ... } const audioFile = { //存放歌曲文件及相关信息 f..
原生JS实现在线音乐播放器及歌词滚动
学习交流记录
06-22 2012
原生JS实现在线音乐播放器及歌词滚动
语音朗读带进度高亮显示
白玉梁的专栏
10-10 1520
语音朗读文章，支持高亮显示，自动滚动播放位置，支持播放进度显示，支持进度条拖动朗读位置！语音SDK使用自科大讯飞！ github：https://github.com/baiyuliang/VoiceSpeekHighLight ...
前端显示代码高亮
weixin_44786238的博客
07-11 2072
前端显示代码高亮 Time：2021-3-22 前言 搭建博客网站的过程还真是多bug…什么奇奇怪怪的问题都有，很大原因就是这个VueCLI版本太高级了…都没什么关于这个版本的使用的资料，中文的官方文档简单的就好像什么都没说，基本的vue语法就那样，但是工程的结构和一些关键API却没有详细说明，难受。使得我总是只能自己不断揣测和尝试。这个代码高亮也是，搞了两天，终于才觉悟问题何在。 转载请注明出处！！！ Author：雾雨霜星 欢迎来我的个人网站进行学习： https://www.shuangxing.to
原生js音乐播放器搜索功能
05-02
实现一个原生JavaScript音乐播放器搜索功能可以按照以下步骤进行： 1. 定义一个搜索框，用于用户输入歌曲名称或歌手名称。 ```html <input type="text" id="searchInput" placeholder="Search..."> ``` 2. 获取搜索框中的输入内容。 ```javascript const searchInput = document.getElementById("searchInput"); const searchText = searchInput.value; ``` 3. 遍历歌曲列表，查找包含搜索内容的歌曲，并将其显示在页面上。 ```javascript const songs = [ { title: '歌曲1', artist: '歌手1', src: 'song1.mp3' }, { title: '歌曲2', artist: '歌手2', src: 'song2.mp3' }, { title: '歌曲3', artist: '歌手3', src: 'song3.mp3' } ]; const searchSongs = (searchText) => { // 遍历歌曲列表，查找包含搜索内容的歌曲 const filteredSongs = songs.filter((song) => { return song.title.includes(searchText) || song.artist.includes(searchText); }); // 清空原来的列表 const songList = document.getElementById("songList"); songList.innerHTML = ''; // 将搜索结果显示在页面上 filteredSongs.forEach((song) => { const li = document.createElement("li"); li.innerHTML = `<span>${song.title}</span><span>${song.artist}</span>`; li.addEventListener("click", () => { playSong(song); }); songList.appendChild(li); }); }; searchInput.addEventListener("input", () => { const searchText = searchInput.value; searchSongs(searchText); }); ``` 4. 在页面中显示歌曲列表。 ```html <ul id="songList"> <li><span>歌曲1</span><span>歌手1</span></li> <li><span>歌曲2</span><span>歌手2</span></li> <li><span>歌曲3</span><span>歌手3</span></li> </ul> ``` 完整的代码示例如下： ```html <!DOCTYPE html> <html> <head> <title>Music Player</title> </head> <body> <h1>Music Player</h1> <input type="text" id="searchInput" placeholder="Search..."> <ul id="songList"> <li><span>歌曲1</span><span>歌手1</span></li> <li><span>歌曲2</span><span>歌手2</span></li> <li><span>歌曲3</span><span>歌手3</span></li> </ul> <script> const songs = [ { title: '歌曲1', artist: '歌手1', src: 'song1.mp3' }, { title: '歌曲2', artist: '歌手2', src: 'song2.mp3' }, { title: '歌曲3', artist: '歌手3', src: 'song3.mp3' } ]; const searchInput = document.getElementById("searchInput"); const songList = document.getElementById("songList"); const playSong = (song) => { // 播放歌曲 }; const searchSongs = (searchText) => { // 遍历歌曲列表，查找包含搜索内容的歌曲 const filteredSongs = songs.filter((song) => { return song.title.includes(searchText) || song.artist.includes(searchText); }); // 清空原来的列表 songList.innerHTML = ''; // 将搜索结果显示在页面上 filteredSongs.forEach((song) => { const li = document.createElement("li"); li.innerHTML = `<span>${song.title}</span><span>${song.artist}</span>`; li.addEventListener("click", () => { playSong(song); }); songList.appendChild(li); }); }; searchInput.addEventListener("input", () => { const searchText = searchInput.value; searchSongs(searchText); }); </script> </body> </html> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 9
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值