用JS创建网易云音乐播放器对象

马黑黑 · 发表于 2022-2-24 14:11

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 2022-2-24 14:13 编辑

先看效果：

马黑黑 · 发表于 2022-2-24 14:14

本帖最后由马黑黑于 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>