HTML点击图片播放音乐

最新推荐文章于 2024-03-05 15:32:42 发布

结城明日奈是我老婆

最新推荐文章于 2024-03-05 15:32:42 发布

阅读量3.3k

点赞数 3

分类专栏： html学习专栏文章标签： html

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

本文链接：https://blog.csdn.net/yasinawolaopo/article/details/117195098

版权

html学习专栏专栏收录该内容

37 篇文章

订阅专栏

这篇博客介绍了如何使用HTML创建一个简单的音乐播放器，通过点击图片来控制音乐的播放和暂停。示例代码中包含了MP3和OGG格式的源文件，以确保跨浏览器兼容性。此外，还提供了隐藏式音频元素和内联播放选项。

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

参考这篇，可以有图单曲循环：

HTML点击图片播放音乐

若是不要图片也就是把文章中的img去掉就行(注：图片和音乐都可以是自己的)

pause:播放暂停

play:播放开始

source:html做判断，哪个格式能在html上运行

<audio controls="controls" autoplay="autoplay" controls="controls" hidden="hidden">
			<source src="D:\CloudMusic\八木海莉 - Sing My Pleasure.mp3" type="audio/mp3">
			<source src="D:\CloudMusic\和田光司 - Butter-Fly -tri.Version-.mp3" type="audio/ogg">
			<embed height="50px" width="100px" src="file/tears.mp3">
</audio>

结城明日奈是我老婆

博客等级

码龄5年

360
原创

545
点赞

978
收藏

3440
粉丝

关注

私信

热门文章

分类专栏

最新评论

[SSR渲染学习]nuxt的跨域处理
结城明日奈是我老婆: 或者你可以通过后端来限制实现跨域访问
[SSR渲染学习]nuxt的跨域处理
结城明日奈是我老婆: 首先外部请求这样写，如果报错是--SyntaxError: Unexpected token 'h', "hello this"... is not valid JSON--类似情况则你后端返回值不是json格式所以会报错，解决办法是fetch(uri).then(res=>return res.text()).then(data=>console.log(data)).catch(err=>consoloe.log(err))来获取文本。总之根据你外部的返回值来修改。至于内部的在nuxt项目根目录下创建server目录在server目录下创建api目录。fetch在调用时fetch('/api')这种一般是在api目录下有和index.js或index.ts的，会默认调用index中的参数,一般我们在serverSSR中的写法是 export default defineEventHandler((event)=>{ return { code: 200, message: "hello world", } }) 所以返回res.json()是没有问题，还是得按实际情况而定
[SSR渲染学习]nuxt的跨域处理
结城明日奈是我老婆: 首先外部请求这样写，如果报错是--SyntaxError: Unexpected token 'h', "hello this"... is not valid JSON--类似情况则你后端返回值不是json格式所以会报错，解决办法是fetch(uri).then(res=>return res.text()).then(data=>console.log(data)).catch(err=>consoloe.log(err))来获取文本。总之根据你外部的返回值来修改。至于内部的在nuxt项目根目录下创建server目录在server目录下创建api目录。fetch在调用时fetch('/api')这种一般是在api目录下有和index.js或index.ts的，会默认调用index中的参数,一般我们在serverSSR中的写法是 export default defineEventHandler((event)=>{ return { code: 200, message: "hello world", } }) 所以返回res.json()是没有问题，还是得按实际情况而定
[SSR渲染学习]nuxt的跨域处理
Python大数据分析: 这样不行
iris+vue上传到本地存储【go/iris】
杰神Rowger: 冒昧问问，标题是iris上传，你的go代码中有iris半毛钱关系吗？

大家在看

最新文章

目录

评论 2

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

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

打赏作者

结城明日奈是我老婆 支持一下一直热爱程序的菜鸟吧

¥1 ¥2 ¥4 ¥6 ¥10 ¥20

扫码支付：¥1

获取中

扫码支付

您的余额不足，请更换扫码支付或充值

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

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