关于＜audio＞标签及控制的问题

最新推荐文章于 2024-05-31 22:11:41 发布

机智的奎哥

最新推荐文章于 2024-05-31 22:11:41 发布

阅读量1k

点赞数 1

分类专栏： Vue.js学习之路初入前端开发从0到1 文章标签： vue javascript js css html

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/asa12345asas/article/details/108418194

版权

初入前端开发从0到1 同时被 2 个专栏收录

21 篇文章 0 订阅

订阅专栏

Vue.js学习之路

9 篇文章 0 订阅

订阅专栏

开发框架：Vue

需求：

需要音乐在所有页面自动循环播放、不能遮挡fixd在底部的按钮。

解决方案：audio标签设置播放器，js控制audio在页面是否隐藏

<audio src="音频链接"  autoplay="autoplay" loop="loop" controls="controls" class="audio" id="audio">
    Your browser does not support the audio element.
</audio>

控制播放组件是否显示

document.getElementById("audio").style.visibility="hidden";// 隐藏组件
document.getElementById("audio").style.visibility="visible";//显示组件

机智的奎哥

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
关于＜audio＞标签及控制的问题

开发框架：Vue需求：需要音乐在所有页面自动循环播放、不能遮挡fixd在底部的按钮。解决方案：audio标签设置播放器，js控制audio在页面是否隐藏<audio src="音频链接" autoplay="autoplay" loop="loop" controls="controls" class="audio" id="audio"> Your browser does not support the audio element.</audio&gt
复制链接

扫一扫

专栏目录

机智的奎哥 CSDN认证博客专家 CSDN认证企业博客

码龄13年

38: 原创

11万+: 周排名

113万+: 总排名

7万+: 访问

: 等级

518: 积分

10: 粉丝

45: 获赞

24: 评论

114: 收藏

私信

关注

热门文章

分类专栏

最新评论

解决微信小程序不支持TextEncoder/TextDecoder对象
Felix8Bit: 可以替换为https://github.com/inexorabletash/text-encoding [code=javascript] const TextEncoderLib = require('./lib/encoding.js'); new TextEncoderLib.TextEncoder(); new TextEncoderLib.TextDecoder(); [/code]
解决微信小程序不支持TextEncoder/TextDecoder对象
曹贼大哥: 还是不行，我使用npm install fastestsmallesttextencoderdecoder 下载到项目里导出来也是空对象，为什么会这样呢
解决微信小程序不支持TextEncoder/TextDecoder对象
机智的奎哥: 解码 [code=javascript] function utf8Decode(utf8) { var str = ''; for (var i = 0; i < utf8.length; i++) { var value = utf8[i]; if (value < 0x80) { str += String.fromCharCode(value); } else if (value > 0xBF && value < 0xE0) { str += String.fromCharCode((value & 0x1F) << 6 | utf8[++i] & 0x3F); } else if (value > 0xDF && value < 0xF0) { str += String.fromCharCode((value & 0x0F) << 12 | (utf8[++i] & 0x3F) << 6 | utf8[++i] & 0x3F); } else { // 处理4字节字符 var charcode = ((value & 0x07) << 18 | (utf8[++i] & 0x3F) << 12 | (utf8[++i] & 0x3F) << 6 | utf8[++i] & 0x3F) - 0x010000; str += String.fromCharCode(0xD800 + (charcode >> 10), 0xDC00 + (charcode & 0x03FF)); } } return str; } [/code]
解决微信小程序不支持TextEncoder/TextDecoder对象
机智的奎哥: 编码 [code=javascript] function utf8Encode(str) { var utf8 = []; for (var i=0; i < str.length; i++) { var charcode = str.charCodeAt(i); if (charcode < 0x80) utf8.push(charcode); else if (charcode < 0x800) { utf8.push(0xc0 | (charcode >> 6), 0x80 | (charcode & 0x3f)); } else if (charcode < 0xd800 || charcode >= 0xe000) { utf8.push(0xe0 | (charcode >> 12), 0x80 | ((charcode>>6) & 0x3f), 0x80 | (charcode & 0x3f)); } // 处理4字节字符 else { i++; // 代理对的处理 charcode = 0x10000 + (((charcode & 0x3ff)<<10) | (str.charCodeAt(i) & 0x3ff)); utf8.push(0xf0 | (charcode >>18), 0x80 | ((charcode>>12) & 0x3f), 0x80 | ((charcode>>6) & 0x3f), 0x80 | (charcode & 0x3f)); } } return new Uint8Array(utf8); } [/code]
解决微信小程序不支持TextEncoder/TextDecoder对象
机智的奎哥: 可以试试自行实现

大家在看

最新文章

目录

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。