为网页添加背景音乐组件

Aplayer + meting-js 实现

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title>    <!-- require APlayer --><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css"><script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script><!-- require MetingJS --><script src="https://cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js"></script></head><body><meting-js server="netease" type="playlist" id="2250011882"fixed="true" autoplay="true"loop="all"order="random"preload="auto"list-folded="ture"list-max-height="500px"lrc-type="1">
</meting-js></body>
</html>

效果:

meting-js中的参数

参数中的id是音乐或者音乐列表的外链id , 下面我们为大家讲解如何获取外链id

网易云获取外链的方式

打开网易云音乐的官网 https://music.163.com/

在其中找到自己喜欢的音乐或者自己喜欢的歌单

先说找到音乐:
看下面的图
因为很多歌曲由于版权问题无法获取外链 , 我们为大家讲解一种通用的方式

取data-href的链接，前面加上https://music.163.com/#进行拼接
生成这样一个外链 https://music.163.com/#/outchain/2/534540206/
在浏览器中打开拼接好的链接 , 如图
在图中可以看到生成的外链的id值
这个id就是我们meting-js中的参数的id处的值
打开歌单 , 生成外链的链接在下图所示的位置 , 其他步骤和上面完全一样

为网页添加背景音乐组件相关推荐

HTML中如何为网页添加背景音乐
许多小伙伴在问HTML中如何为网页添加背景音乐,其实很简单,先准备好你的mp3音乐文件,这里我随便准备一个yinyue.mp3作为示例,那么怎么嵌入到网页呢?敲黑板了,注意,这是关键所在,参考以下关键 ...
html网页添加背景音乐
html网页添加背景音乐 <embed src="./audio/1.m4a" hidden="true" autostart="true&qu ...
dw给HTML加背景音乐,Dreamweaver怎样为网页添加背景音乐播放器？
核心提示:在Dreamweaver为网页添加背景音乐播放器,是丰富页面活动的重要内容.本篇教程将就Dreamweaver网页背景音乐播放器的添加进行详细讲解. 在Dreamweaver为网页添加背景音 ...
HTML5 网页添加背景音乐
方式一: <video controls="" autoplay="" name="media"> <source src ...
html5添加背景音乐
0.补充demo 把代码分离出来做了demo,大家需要的可以自行下载,下载地址:下载地址点这里 1.需求说明 html5添加背景音乐 2.问题解决直接上代码吧首先添加音乐控件的div <di ...
Vue 自定义音乐播放器组件为H5添加背景音乐
自定义音乐播放器组件为H5添加背景音乐: 1.创建music.vue组件 <template><div><div @click="changeOn" ...
HTML网页背景音乐怎么在谷歌,谷歌浏览器怎么添加背景音乐
谷歌浏览器如何添加背景音乐问题: 在网页中用下面两种方法添加网页背景音乐: 1. 2. 这两种办法,在IE浏览器上都能顺利播放出背景音乐,但是在谷歌和火狐浏览器上没有背景音乐. 两种解决方案: 1. ...
给你的网页添加随机BGM背景音乐
简介: 网页添加音乐方法每当网页shua新及打开一次随机播放一首BGM 内容十首音乐,某易云.酷狗音乐外链,可以自定义更换可以从这里进行获取自己的音乐外链音乐以下内容添加载标签前就可以了网盘 ...
html语言音乐添加路径,HTML5简单实现添加背景音乐的几种方法
这里推荐两种方法,就是两个标签或者常用 +css布局隐藏播放器做网站比较实用! html5添加音乐说明: 1.src毫无疑问写路径. 2.使用hidden="true"表 ...

为网页添加背景音乐组件

Aplayer + meting-js 实现

meting-js中的参数

网易云获取外链的方式

为网页添加背景音乐组件相关推荐

最新文章

热门文章