首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

自制 h5 音乐播放器 可搜索

致谢:歌曲搜索参照某位大佬封装的 qq 音乐的 api,UI 界面参照另一位大神的一些解决方案,在此表示感谢 相关链接: 那么相关使用的开源插件有: jQuery官方类库:https://jquery.com.../ layer弹窗插件:http://layer.layui.com/ 复制粘贴库插件:https://www.npmjs.com/package/clipboard-js mCustomScrollbar...温馨提醒: 本播放器并不需要什么特别的运行环境,直接下载打开就能用了 ^_^ 响应式优化,可在各种大小的设备运行打开 音乐搜索的结果均来自 qq音乐 (后续会继续扩大到多个平台) 本播放器还有一些 bug...谈谈开发: 果断使用的是 H5 播放器,十分好用 一般在做这种播放器的开发,要多多使用面向对象的开发思想。...\s*)|(\s*$)]/.test(val)) 13 return true; 14 return false; 15 } ES6 都出来了,那当然要好好使用,在字符串拼接的代码

4.3K40
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    Lily_music 网页音乐播放器 -可搜索(附歌词联动播放效果解说)

    博客地址:https://ainyi.com/59 写在前面 这是我今年(2018)年初的小项目,当时也是手贱,不想用别的播放器,想着做一个自己的网页播放器,有个歌曲列表、可关键词搜索、歌词滚动播放的效果...==致谢==:歌曲搜索参照某位大佬封装的 qq 音乐的 api,UI 界面参照另一位大神的一些解决方案,在此表示感谢 相关插件 那么相关使用的开源插件有: jQuery 官方类库:https://jquery.com...layer 弹窗插件:http://layer.layui.com 复制粘贴库插件:https://www.npmjs.com/package/clipboard-js mCustomScrollbar...、加载动画sg类库等功能全部手写,爽的不行 温馨提醒 本播放器并不需要什么特别的运行环境,直接下载打开就能用了 ^_^ 响应式优化,可在各种大小的设备运行打开 音乐搜索的结果均来自 qq音乐 (后续会继续扩大到多个平台...,就可以实现==当前播放时间==和==当前歌词==一一对应,附上代码: loadLrc :function(){//加载歌词 var vallrc = $(".hidetextlrc").text(

    5.5K70

    WordPress添加音乐播放器(纯代码实现)

    一、前言 为WordPress网站添加一个音乐播放器,网上大部分的教程都是使用各种插件,有的插件还需要花钱买授权,用着不爽。本文用纯代码为网站添加音乐播放器,安全可靠,可以任意修改。...本文以吸底模式为例进行说明,如果想采用其它模式,可以根据文档手册修改代码。.../MetingJS Meting为Aplayer提供了网易云音乐的API接口,只要获得网易云音乐歌单的ID,就可以自动加载歌单里所有的歌曲,直接调用,方便很多,当然除了网易云音乐的API,还有其他的接口.../Meting.min.js"> 将代码中的wp-content/themes/construction-base改为你的WordPress主题的根目录。...保存好后,刷新网页就可以看到播放器了。 但是这个播放器的歌单是我指定的歌单,如果想用自己的网易云音乐歌单,可以修改data-id的值,这个值的获取方法也很简单:

    3.1K10

    用MediaPlayer做个带进度条可后台的音乐播放器

    传送到github看源码 下载apk试用 密码:rukn 前言 想在天朝听音乐还是有些难度的, 一般来说, 两三个app还是要的. 那何不尝试自己做个手机播放器, 听个爽呢?!...今天就带大家先做个简单的带进度条可拖动的音乐播放器. 添加了后台播放的功能, 很实用哦~ 先看效果图 很尴尬的一点就是大家没法听到音乐, 就只能看看图片....具体的说明请移步官方文档 /** * 播放音乐 * * @param path 播放文件的路径 */ public void playMusic...if (mediaPlayer.isPlaying()) { mediaPlayer.pause(); } } /** * 继续播放音乐...关键是要获取到音乐的总长度, 并且实时更新, 要实时更新的话, 我这里开了一个线程, 1s刷一次, 就不多说了. /** * 更新SeekBar */ private

    1.8K40

    网站通过代码引入Aplayer音乐播放器,无需插件

    5WordPress区块音乐播放器推荐:基于APlayer的Hermit X(支持网易云、QQ音乐、虾米等) 前天 17910 实现方法 这里还是通过APlayer的方式引入:其界面美观,功能强大。...音乐播放器的音乐信息,歌词,进度条,音量,顺序模式,循环模式都支持。可以使用三方音乐外链,还可以使用自己的音乐链接。...实现代码 你可以到APlayer的文档页下载对应的css和js,或者直接使用jsdeliver CDN来引入。...,当该播放器开始播放时暂停其他播放器 listFolded false 列表是否先折叠 listMaxHeight - 音频列表最大高度 第三方音乐引入 单曲引入 因为我一般是在文章里插入,所以一般是单曲引入...">js> mini播放器引入 因为我不放网站侧边,因为那样影响用户体验,所以一般不用mini样式。

    6.4K10

    代码开源,音乐无价,GitHub 上这几个高颜值音乐播放器你值得拥有!

    音乐,作为程序员日常不可或缺的精神食粮,能稳定你改 Bug 时那颗焦躁不安的心,亦能提升你的编码效率。 今天,与你分享 GitHub 上几个高颜值的音乐播放器。...ieaseMusic 网易云音乐,作为目前市场占比较高的一款音乐播放器,其界面设计、歌曲推荐系统、评论系统,都属上品。 如果你看腻了官方的那套 UI,不妨尝试下这个。...,那你一款也会欣赏这款音乐播放器。...Chord(弦),基于 electron 实现的音乐播放器,实现了类似 spotify 的 UI。 暗黑色的选择,让你的音乐空间更显神秘。 ?...其功能特性如下: 歌曲推荐、搜索 歌单、专辑、艺人筛选 无边框窗口 多平台(虾米、网易云音乐、QQ 音乐、千千音乐) https://github.com/PeterDing/chord music 作为一款

    6.2K10

    VBA代码分享:可搜索的数据验证+组合框

    Excel没有提供搜索数据验证列表的内置方法。因此,当列表很长时,通过滚动来浏览列表很不方便。...在mrexcel.com中,提供的可搜索的数据验证+组合框就是解决这个问题的一种方法,它有以下行为: 1.组合框可以通过某些操作显示和隐藏,例如双击单元格。...可以到知识星球完美Excel社群下载带有代码和详细说明的示例工作簿(ComboBox+DataValidate1.xlsm)。...- 搜索忽略关键字顺序, 因此关键字"mala"与"Maryland"和"Alabama"都匹配 - 使用上下箭头选择项目,单击回车键,所选项目会插入到单元格,且组合框会隐藏 - 要关闭组合框:单击TAB...键或ESC键 - 列表中的数字值将视为文本 这是一段通用代码,你可以按照示例工作簿中的说明将代码复制到你想要应用的工作簿中。

    1.5K20

    ❤️使用 HTML、CSS 和 JS 创建在线音乐播放器(含免费完整源码)❤️

    直接跳到末尾 获取完整源码 今天我将带着大家使用 HTML、CSS 和 JS创建 音乐播放器,没有使用任何其他库。我们的音乐播放器具有三个部分。主屏幕、播放器部分和播放列表部分。...这个音乐播放器最好的部分是它最小化了音乐播放器。是的,您可以最小化和最大化播放器本身。使这个项目成为一个很棒的音乐播放器。...❤️使用 HTML、CSS 和 JS 创建在线音乐播放器❤️ 在线演示地址 完整代码结构 home-section 首页部分 player-section 播放器部分 playlist-section...因此,如果您对此代码有任何疑问,请随时在讨论中问我。我们的导航完成了。所以让我们创建我们的音乐播放器。 music 音乐部分 对于音乐播放器,我们的页面中需要一个音频源,但现在我们没有。...播放器、导航栏、播放列表、轮播图,刷新,音量加减等等 wuhu ! 起飞 ! 希望通过本文,您已经学会了如何使用 HTML、CSS 和 JS 的在线音乐播放器。

    8.5K62

    VBA代码分享2:可搜索的数据验证+组合框

    Excel没有提供搜索数据验证列表的内置方法。因此,当列表很长时,通过滚动来浏览列表很不方便。...在mrexcel.com中,提供的可搜索的数据验证+组合框就是解决这个问题的一种方法,它有以下行为: 1.组合框可以通过某些操作显示和隐藏。...在《VBA代码分享:可搜索的数据验证+组合框》中是通过双击单元格;在本文提供的代码中,是单击选择具有数据有效性的单元格。 2.可以在组合框中键入一些关键字,键入时列表将随着键入的值而缩小。...组合框可搜索内容 下载这个示例工作簿。...键或ESC键 - 列表中的数字值将视为文本 这是一段通用代码,你可以按照示例工作簿中的说明将代码复制到你想要应用的工作簿中。

    1.3K40

    网站这样引入一款简洁而功能强大的音乐播放器

    H5播放器介绍 APlayer 是一个简洁漂亮、功能强大的 Html5 音乐播放器 MetingJS 是为 APlayer 添加网易云、QQ音乐、酷狗音乐等支持的插件 安装教程 安装很简单,一共需要调用三个文件...代码中: 参数 container 值为 document.getElementById('aplayer') 意思是定义当前播放器容器 id 为 aplayer 参数 audio 中有 4 个子参数...而使用 MetingJS 就很好地解决了这个问题 对应的代码为: js server="netease" type="song" id="31365604" >...js> 一个 MetingJS 播放器至少需要三个参数: server 指定调用的 API ,可选 netease, tencent, kugou, xiami, baidu ,分别对应网易云音乐...、QQ音乐、酷狗音乐、虾米音乐、百度音乐 type 指定调用类型,可选 song, playlist, album, search, artist ,分别对应单曲、歌单、专辑、搜索结果、艺术家 id 指定调用的

    2K40

    mmPlayer:一款基于Vue的自适应Web在线音乐播放器

    说明:一两年前博主曾分享过一个美观的在线音乐播放器MKOnlineMusicPlayer→传送门,不过作者早已停止了维护,最近有小伙伴推荐了mmPlayer,一个使用Vue全家桶打造自适应Web音乐播放器...,模仿QQ⾳乐⽹页版界⾯,主要以为PC端为主,移动端只做相应适配(未做歌词显⽰),现已实现播放器、歌词滚动、排⾏榜、搜索、播放历史、同步⽹易云歌单六⼤功能。...截图 功能 播放器 快捷键操作 歌词滚动 正在播放 排行榜 歌单详情 搜索 播放历史 查看评论 同步网易云歌单 安装 Github地址:https://github.com/maomao1996/Vue-mmPlayer.../mm-header.vue,自己找关键词自行修改吧 这里如果你想使用https访问该音乐播放器,那还需要使用https域名反代该api地址,然后将反代后的https域名填进去。...最后如果你只是想玩玩,那这里提供一个最快的运行方法,使用命令: #进入打包好的文件夹 cd dist #运行端口4567,可自行修改 python -m SimpleHTTPServer 4567 然后访问

    7.3K11
    领券