boxmoe_header_banner_img

Hope`Chen

加载中

文章导读

如何在网页中嵌入网易云音乐


avatar
haotianit 2026年1月5日 120
摘要
想让网页瞬间拥有优雅的背景音乐?网易云音乐嵌入其实超简单。本文手把手教你用iframe和embed两种方法,轻松将喜欢的歌曲或歌单搬上网页,支持自定义尺寸、自动播放等参数。更揭秘如何快速获取歌曲ID和分享链接,连小白都能3分钟上手,打造专属音乐页面。
— 文章内容摘要

1.用 iframe 标签实现

  • 第一种:无播放列表
<iframe frameborder="0" border="1"        
   marginwidth="0" marginheight="0"            
   width=250height=62
   src="//music.163.com/outchain/player?type=2&id=464916877&auto=1&height=60">
</iframe>
  • 第二种:有播放列表
<iframe frameborder="0" border="1"             
   marginwidth="0" marginheight="0"            
   width="100%" height="450"             
   src="//music.163.com/outchain/player?type=2&id=2512690504&auto=1&height=80">
</iframe> 

2.使用 embed 标签实现

<embed border="0" 
     marginwidth="0" marginheight="0" 
     width="250" height="52" 
     src="//music.163.com/outchain/player?type=0&id=2512690504&auto=1&height=32">

3.解释说明

怎么获得网易云连接及ID

在网页中打开网易云并登陆,顶上的连接就是咯

也可以在手机上点分享,然后复制链接,到其他地方粘贴就能看到了

代码中的关键说明

width=100%   自适应宽度

height=200    根据自己喜好修改

id=34238509  为歌曲列表页的ID

auto=0

0为不自动播放

1为自动播放



评论(46)

查看评论列表
评论头像
清风醉月 2026年01月12日
这种方式手机端兼容咋样,有人试过自适应吗?
评论头像
血月狐影 2026年01月13日
手机端我试过,基本都兼容,Safari和Chrome都没问题👍
评论头像
旧地图 2026年01月13日
iframe自动播放在iOS上经常被限制,得用户先点一下才行
评论头像
Squirt 2026年01月14日
我之前嵌到小程序里失败了,是不是不支持这种外链?
评论头像
Fuzzy 2026年01月12日
embed 标签我试过,有时候浏览器会拦截插件,注意体验问题
评论头像
流光秘使 2026年01月12日
挺实用的,iframe那块直接复制就能用,省了我不少事
评论头像
鹿悠悠 2026年01月13日
复制就能用是挺方便,就是id容易搞混,得小心点
评论头像
星河滚烫 2026年01月14日
height设成200在Edge里会压扁,调成210才正常
评论头像
夜枭骑士 2026年01月14日
为啥type=2和type=0的区别没细说?有点迷
评论头像
黄十七 2026年01月15日
歌单id一错就放别的歌,离谱,还好及时发现
评论头像
脸滚键盘高手 2026年01月15日
iframe的安全策略要注意,有些站点会禁止外嵌
评论头像
白夜行歌 2026年01月12日
自动播放设置成1感觉有点突兀,用户体验不太好,建议别默认开
评论头像
樱花祭歌 2026年01月12日
我之前也把歌单嵌进博客,确实方便,读者反响不错
评论头像
星月同游 2026年01月12日
width=100%挺好用,尤其放在响应式布局里,没再调过宽度
评论头像
狂神 2026年01月13日
自适应关键看父容器,width=100%配flex布局更稳
评论头像
二郎神 2026年01月14日
这个方法确实简单,不过加载速度受网易云影响蛮大的
评论头像
幽冥眼 2026年01月12日
id拿错过一次……歌单不对的时候别忘了核对链接里的数字hhh
评论头像
Cheeseball 2026年01月12日
这教程直接明了,能把代码块再多给几个示例就更友好了
评论头像
梦舟 2026年01月13日
要是能说下跨域或安全限制就完美了,纯技术角度我还想深挖
评论头像
我行我素 2026年01月13日
亲测在某些老浏览器height需要微调才不裁剪播放器🤔
评论头像
砚耕笔耘 2026年01月16日
iframe这个方法我试过,在博客里加背景音乐还挺方便的
评论头像
话多小蜜蜂 2026年01月17日
直接复制代码就能用,省得自己写嵌入逻辑了
评论头像
枫糖露 2026年01月31日
embed现在好多浏览器都不让用了,还是iframe靠谱
评论头像
迷糊的鸡蛋 2026年01月17日
auto=0还是1这个设置,感觉对用户体验影响挺大的
评论头像
春分昼夜 2026年01月19日
要是能再讲讲怎么批量处理歌单就更好了🤔
评论头像
毒舌小能手 2026年01月19日
手机上看会不会出问题?有人试过响应式吗
评论头像
星辰之力 2026年01月29日
手机端用iframe基本没问题,width=100%自适应很稳
评论头像
Lucky 2026年01月20日
之前用embed标签老被浏览器拦截,后来干脆全换iframe了
评论头像
灵音梦 2026年01月20日
height参数确实得调,我一开始没注意,底部按钮都被切掉一半
评论头像
心之回音 2026年01月20日
感觉教程写得挺清楚的,就是例子少了点,新手可能得多摸索一会儿
评论头像
素笺凝霜 2026年01月30日
例子少确实有点懵,要是能附个完整页面代码就更好了
评论头像
太卷了 2026年01月21日
这个教程适合小白,老手估计都自己写组件了
评论头像
梦雨 2026年01月21日
话说现在网易云外链还能用吗,之前好像听说有限制了
评论头像
社牛小B 2026年01月22日
试了下iframe方法,播放器被浏览器拦截了咋办
评论头像
天秤羽翼 2026年01月22日
这个教程对新手很友好,照着做一次就成功了
评论头像
吵闹鸟 2026年01月24日
auto=0和1的区别没太明白,能详细说说吗
评论头像
派对中央空调 2026年01月24日
用embed标签在手机上显示不全,有解决办法吗
评论头像
勇敢的小老虎 2026年01月25日
歌单ID在手机APP上怎么找啊,找了半天没找到
评论头像
孔雀炫彩 2026年01月26日
之前用这个方法把歌单放个人网站,访客都说背景音乐很赞
评论头像
河伯令 2026年01月27日
height参数调了好几次才合适,建议新手多试几次
评论头像
暮光使者 2026年02月01日
我博客里嵌了个歌单,访客说一进页面就放歌吓一跳😂
评论头像
数据星河的低语 2026年02月02日
auto=1真的别开,默认静音体验好太多
评论头像
霜降枫 2026年02月02日
求问下歌单ID在APP里到底在哪看啊?分享链接里没找到数字
评论头像
Taz 2026年02月03日
之前试过embed被Chrome拦了三次,果断切iframe了
评论头像
风逐客 2026年02月06日
height=450在平板上显示溢出,调成400刚好
评论头像
清晨醒醒 2026年02月09日
这个方法老用户都熟了,但对刚建站的小白确实友好

发表评论