如何在自己的网站页面中嵌入一个【悬浮音乐播放器】

如何嵌入【悬浮音乐播放器】

前言
正文
- 1.打开网易云网页版
- 2.设置自己想要的高度和宽度
- - 看注意事项
- 3.选择是否为自动播放
- 4.在header.php文件中`</head>`==标签前==插入下面代码
- 5.在heard.php 中`<body>`==标签后==边增加一个 div层
- 6.复制播放器代码到\<div>标签的里边
- 7.保存！！
成品

前言

因为最近自己的云服务器刚好到期了，当我又买好设置完毕云服务器后。
突然有了一个建网站的想法，想要把自己的博客迁移到网站上去。
我在学校中也学过了web编程，但是也是忘得大差不差了。
所以相当于一个从零建站的开始，凭借着我现在在学Linux刚好也可以熟悉熟悉Linux的操作。建站的时候踩了许多坑，但是经过一点一点的摸索，终于也是把网站搞好了。
我会写几篇文章，记录一下建站的过程，当作一个教程吧。

环境：lamp
系统：Ubuntu22.4
平台：wordpress
主题：Sakurairo

正文

这篇文章介绍：如何在自己的网站页面中嵌入一个可以自动播放的
【悬浮音乐播放器】

并且切换网页时音乐不会停止哦！

在这里插入图片描述

当我在找其他音乐播放插件和Sakurairo主题自带的插件时，都没有成功，有的插件显示不出来，有的根本播放不了。
当我找网易云cookie的时候发现了网易云有一个iframe音乐插件，可以把单曲或者歌单自动生成一个HTML代码。
所以如何给网站嵌入一个音乐播放器呢。

1.打开网易云网页版

点击生成外链播放器
在这里插入图片描述

2.设置自己想要的高度和宽度

在这里插入图片描述

看注意事项

优点：可以自己调整插件的高度、宽度
缺点：很多博客网站不支持嵌入iframe，请试一下您的网站是否支持

3.选择是否为自动播放

在这里插入图片描述

4.在header.php文件中`</head>`标签前插入下面代码

<style>
    .float {
        width: 400px;	/*div宽度*/
        height: 250px;	/*div高度*/
        position: fixed; /*设置position的fixed属性，如果滑动页面播放器位置保持不动*/
        top: 70%;	/*距离页面顶部距离百分比*/
        left: 72%;	/*距离页面左侧距离百分比*/
        transform: translate(50%, -50%);	/*居中*/
    }
</style>

5.在heard.php 中`<body>`标签后边增加一个 div层

div层class设置为上一步css样式的名称

<div class="float">
	
</div>

6.复制播放器代码到<div>标签的里边

<div class="float">
	<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=260 height=180 src="//music.163.com/outchain/player?type=0&id=2520739691&auto=1&height=430"></iframe>
</div>