用JS创建网易云音乐播放器对象
本帖最后由 马黑黑 于 2022-2-24 14:13 编辑 <br /><br /><p>先看效果：<br></p><style>
/* 父盒子 */
#wyyBox {
margin: 10px auto;
width:300px;
height: 52px;
text-align: center;
}
/* 播放器 */
#wyyBox iframe {
width: 298px;
height: 52px;
border: none;
/*切割 clip-path: circle(16px at 271px); */
}
</style>
<div id="wyyBox"></div>
<script>
var wyyBox = document.getElementById("wyyBox"); //父 div 盒子标识
var frm = document.createElement("iframe"); //创建 iframe 元素
//iframe 加载 src
frm.src = "https://music.163.com/outchain/player?type=2&id=1359463524&auto=1&height=32";
wyyBox.appendChild(frm); //父盒子加载 iframe 元素
</script> 本帖最后由 马黑黑 于 2022-2-24 14:18 编辑
用JS创建网易云音乐播放器对象 | 马黑黑
网易云音乐提供的播放器代码使用 iframe 标签，其HTML代码不够规范，不符合H5标准，常被具备语法检测功能的Code或IDE编辑器报错。解决方法有诸多选择，这里尝试使用JS来加载网易云音乐播放器。
思路：JS只负责创建网易云音乐播放器对象，并令其作为一个 div 盒子内的子元素，播放器的样式由CSS实现。
实现：以小号播放器为例——
一、CSS代码
#wyyBox {
margin: 10px auto;
width:300px;
height: 52px;
text-align: center;
}
#wyyBox iframe {
width: 298px;
height: 52px;
border: none;
}
二、HTML代码
<div id="wyyBox"></div>
三、JS代码
var wyyBox = document.getElementById("wyyBox"); //父 div 盒子标识
var frm = document.createElement("iframe"); //创建 iframe 元素
//iframe 加载 src
frm.src = "https://music.163.com/outchain/player?type=2&id=1359463524&auto=1&height=32";
wyyBox.appendChild(frm); //父盒子加载 iframe 元素
OK，就这么几行代码，网易云音乐播放器就创建、加载完毕。这几行代码用到的三个基于DOM（document）的方法简单说明如下：
① getElementById() : 通过 id 标识获得对象（元素）的操作句柄，例中我们把句柄赋值给了变量 wwyBox；
② createElement() : 创建元素，可用元素为HTML标签所指代的元素，如 div、iframe 等。例中，创建后的操作句柄赋值给了变量 frm；
③ appendChild() : 追加孩子元素，例中是父盒子添加 frm 即网易云音乐播放器对象。
完整代码：
<style>
/* 父盒子 */
#wyyBox {
margin: 10px auto;
width:300px;
height: 52px;
text-align: center;
}
/* 播放器 */
#wyyBox iframe {
width: 298px;
height: 52px;
border: none;
/*切割 clip-path: circle(16px at 271px); */
}
</style>
<div id="wyyBox"></div>
<script>
var wyyBox = document.getElementById("wyyBox"); //父 div 盒子标识
var frm = document.createElement("iframe"); //创建 iframe 元素
//iframe 加载 src
frm.src = "https://music.163.com/outchain/player?type=2&id=1359463524&auto=1&height=32";
wyyBox.appendChild(frm); //父盒子加载 iframe 元素
</script>
这样就可以得到符合HTML代码规范的播放器了，黑黑真棒{:4_199:} 红影 发表于 2022-2-24 16:04
这样就可以得到符合HTML代码规范的播放器了，黑黑真棒
这个做法，能通过w3c的验证 这个就是解决网易云播放器的好方法。老黑真厉害。{:4_199:} 加林森 发表于 2022-2-24 17:40
这个就是解决网易云播放器的好方法。老黑真厉害。
网易不太用心做分享，虽然分享一直保留着 马黑黑 发表于 2022-2-24 17:42
网易不太用心做分享，虽然分享一直保留着
我就是改变不了它的结构，好多图片都是无法制作，你这个办法真好。{:4_190:} 马黑黑 发表于 2022-2-24 17:36
这个做法，能通过w3c的验证
黑黑真厉害{:4_187:} 红影 发表于 2022-2-24 19:46
黑黑真厉害
厉害谈不上，是标准执行者 马黑黑 发表于 2022-2-24 21:07
厉害谈不上，是标准执行者
怎么加进图片呢？ 加林森 发表于 2022-2-24 21:09
怎么加进图片呢？
图片与本帖所讨论的内容无关，那是另一回事。你想怎么加就怎么加。 加林森 发表于 2022-2-24 17:55
我就是改变不了它的结构，好多图片都是无法制作，你这个办法真好。
分离吧，它负责音乐，其他的你说了算。你看看我的切割，我的杀猪刀还是很利的。 马黑黑 发表于 2022-2-24 21:07
厉害谈不上，是标准执行者
嗯嗯，按照标准来做才是最恰当的{:4_187:} 红影 发表于 2022-2-24 21:29
嗯嗯，按照标准来做才是最恰当的
标准是很重要的。举个栗子：
手机充电线接口，苹果有苹果的标准，安卓有安卓的标准，然后安卓又归向tpye-c标准，结果是，一家人给手机充电，得各自找自己的数据线 马黑黑 发表于 2022-2-24 21:10
图片与本帖所讨论的内容无关，那是另一回事。你想怎么加就怎么加。
我试了的，加不进去。 加林森 发表于 2022-2-24 22:12
我试了的，加不进去。
那肯定加不进去。加别的地方。 马黑黑 发表于 2022-2-24 21:14
分离吧，它负责音乐，其他的你说了算。你看看我的切割，我的杀猪刀还是很利的。
好的好的，我去试一试。 马黑黑 发表于 2022-2-24 22:13
那肯定加不进去。加别的地方。
我制作考虑 加林森 发表于 2022-2-24 22:15
我制作考虑
播放器是播放器，它只是一个点缀。其他的是其他的 马黑黑 发表于 2022-2-24 21:31
标准是很重要的。举个栗子：
手机充电线接口，苹果有苹果的标准，安卓有安卓的标准，然后安卓又归向tp ...
是的，统一标准，可以减少麻烦。