关于Audio标签添加网易云音乐作为背景音乐的两三事

最新推荐文章于 2022-05-04 17:19:22 发布

Walker_邹

最新推荐文章于 2022-05-04 17:19:22 发布

阅读量3.2k

点赞数 3

分类专栏：前端文章标签： html 添加音乐 js

本文链接：https://blog.csdn.net/qq_34487996/article/details/86010720

版权

本文介绍了如何使用HTML5的audio标签添加网易云音乐作为网页背景音乐，包括audio标签的基本使用和JavaScript控制。在实践中，遇到了网易云音乐外链无效化及Chrome自动播放限制的问题。解决方法包括寻找有效的外链源和调整自动播放策略。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

关于Audio标签添加网易云音乐作为背景音乐的两三事

一、写在开头

1.audio：html5音频标签

<!-- 添加背景音乐 -->
<audio id="music" src="https://music.163.com/#/song?id=3405868" autoplay preload="auto" loop="loop">该浏览器不支持audio属性</au

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Walker_邹

关注关注

3
点赞
踩
8

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

网易云歌词解析(配合audio标签实现本地歌曲播放,歌词同步)

weixin_30328063的博客

06-14

934

先看下效果 github上做的一个音乐播放器:https://github.com/SorrowX/electron-music 中文歌曲英文歌曲(如果有翻译的中文给回返回出去) 韩文歌曲来看下解析歌词的类 class Lyric { constructor(data) { this.data = dat...

调用网易云Api接口实现移动Web网易云部分功能(搜索+列表+播放）

qq_43372180的博客

06-12

1万+

调用网易云Node.js实现网易云音乐部分功能的实现

1 条评论您还未登录，请先登录后发表或查看评论

网易云音乐的 song/media/outer/url audio 链接 chrome 上可以， edge不行

jonathan_joestar的博客

05-04

2545

网易云音乐的这个链接 https://music.163.com/song/media/outer/url?id=29023577.mp3 <audio ref="audio" :src="`https://music.163.com/song/media/outer/url?id=${playlist[playCurrentIndex].id}.mp3`"></audio> chrome 上可以， edge不行，放了1秒钟就没了，不过我同学的edge也行的，总之是个莫名其妙的坑

jq+html+css 实现简易版网易云音乐

做技术，坚持才是最重要的，一时的热情只是暂时的进步

03-01

906

项目访问升级版对应文章 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /&g

uni-app中解析html，绝对适用

weixin_37626925的博客

03-06

1万+

uni-app中解析html方法： uni-app官方提供了rich-text标签，而且推荐使用Array类型，可以用html-parser来转换，话不多说，上代码： js： var str = "xxx"; //获取到的html字符； var chtml = "xxx"; //可解析的字符； var htmlString = str.replace(/\\/...

网页中添加背景音乐

gu_eu的博客

04-02

9058

网页中添加背景音乐 方式一： <video controls="" autoplay="" name="media"> <source src="音乐链接" type="audio/mpeg"> </video> 方式二 <video controls="true" autoplay="true" name="media" loop="true" hidden="true"> <source src="http://music.163.com/son

不支持Http媒体类型异常:内容类型text/plain

qq_39009944的博客

06-16

5760

今天使用postman发送请求的时候出现以下错误 "status": 415, "error": "Unsupported Media Type", "message": "Content type 'text/plain;charset=UTF-8' not supported", "trace": "org.springframework.web.HttpMediaTypeNotSupportedException: Content type 'text/plain;ch

audio 标签加入背景音乐谷歌浏览器不能自动播放的问题(二)

hello world！

12-17

3402

audio 标签加入背景音乐谷歌浏览器不能自动播放的问题上面这是之前写过的一篇,但是后来小编发现, 对浏览器兼容性不是很友好, 谷歌浏览器打开, 有时可以自动播放, 有时却又不能自动播放今天从另外一个角度重新思考; 打开页面后通过单击页面任意空白处来触发播放 ; 废话不在此赘述; 直接上关键代码 <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv=Content-Type content="te

audio 标签加入背景音乐谷歌浏览器不能自动播放的问题

hello world！

12-04

2985

html5网页中用video标签无法播放MP4视频的解决方法

热门推荐

网站运营

11-21

17万+

今天一位朋友Q我说：为什么我录制的MP4视频在本地可以播放但是使用html5的video多媒体播放标签不能正常播放只有一个进度条而不显示图像？当时我也很好奇MP4视频可以用video标签播放呀，我就经常用，毕竟是好朋友我还是亲自去筛查了一下问题，这不结论处来了，其实就是一个视频编码的问题，格式虽然都是MP4但是html中只支持H.264的编码格式，无奈只能重新转换一下编码了。为了避免大家遇

如何添加媒体类型和对应的编解码器

我也要去摘星星

04-25

1950

Stagefright中OMXCodec中根据Extractor中的MIME创建对应编解码器组件的流程如下: 所有支持的编解码类型都是在AwesomePlayer初始化的时候就创建好的. 硬编解码器从hardware/XXX/media/libstagefrighthw/libstagefrighthw.so中加载软编解码器从frameworks/av/media/libstagefrigh

VUE动态绑定audio/video的src不能播放

酷拽舞神

07-16

2万+

前几天写个项目，要求要本地上传音视频至服务器，再回显可播放。心想这简单啊，直接vue双向绑定不就轻松解决，没想到遇到个大坑~ html代码如下： <audio controls> <source :src="audio_url"> 您的浏览器不支持 audio 元素。 </audio> js代码如下： this.audio_url = ...

视频直播技术之HLS 如何播放m3u8格式

小小少年

03-19

2万+

引言在H5新标签video诞生之前，基本上所有直播都是用flash实现的。常用的流媒体协议主要有 HTTP 渐进下载和基于 RTSP/RTP 的实时流媒体协议，这两种协议是完全不同的实现方式。主要区别如下： 1. 一种是分段渐近下载，一种是基于实时流来实现播放 2.协议不同，HTTP 协议的渐近下载意味着你可以在一台普通的 HTTP 的应用服务器上就可以直接提供点播和直播服务 3.延迟...

关于流媒体HLS分割的TS文件不能播放

linux_vae的专栏

03-27

5747

关于流媒体HLS分割的TS文件不能播放问题在做nginx hls推流直播的时候遇到分割的ts流片段，vlc播放一闪而过不能播放的问题：推荐工具：EasyICE 工具可以很好的看到每个帧的情况，和PES的属性一般情况下，TS流的时间长度 = （最大PCR - 最小PCR），PCR就类似一个TS 文件的时间戳不能为0 在解析ts的时候配合EasyICE工具和TS解析文档，就能很快的把ts的一

[HTML5和Flash视频播放器]Video.js 学习笔记(一 ) HLS库:videojs-contrib-hls

Tinywan

04-11

2908

 DEMO地址：https://github.com/Tinywan/PHP_Experience https://github.com/videojs/videojs-contrib-hls 下载JS文件，直接使用 <video id=example-video width=600 height=300 class="video-js vjs-d...

HTML5视频播放的一点儿小收获

遛狗的代码的博客

01-19

935

事情的起因是因为本人最近在淘宝网上买了一套Photoshop的视频，但是有个问题就是，它只能在淘宝学习模块观看，但是淘宝学习做的不能用难用来形容（相比网易云课堂、慕课网），于是我萌生了把视频下载下来的想法。开始准备工作，以为满心欢喜的打开了F12，准备把它抓取出来。然后就开始问题来了：然后，发现它的URL是一个blob，由此，开始引入Blob类。我才疏学浅，就不进行解释了，直...

百度语音播报报错

qq_38730338的博客

04-02

1564

代码： function speckText(str){ var url = "http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&text=" + encodeURI(str); var n = new Audio(url); n.src = url; n.play(); } 我是根据https://my.oschina.n...