原创投稿
  1. 创想鸟首页
  2. 用户投稿

使用JavaScript实现音乐播放/暂停按钮：一份详细教程

程序猿 • • 用户投稿

使用javascript实现音乐播放/暂停按钮：一份详细教程

本文将指导你如何使用HTML、CSS和JavaScript创建一个简单的音乐播放/暂停按钮。通过本文，你将学习如何控制音频元素的播放状态，以及如何根据播放状态动态改变按钮的样式。我们将提供清晰的代码示例和详细的解释，帮助你理解并实现这个功能。

1. HTML结构

首先，我们需要创建一个包含音频元素和播放/暂停按钮的HTML结构。

      
  •

元素用于嵌入音频文件。src 属性指定音频文件的路径，preload=”auto” 属性告诉浏览器预加载音频文件。

和

用于创建播放/暂停按钮。play 类用于设置初始状态下的按钮样式。

2. CSS样式

接下来，我们使用CSS来设置按钮的样式。

#music-button-container,#play-pause {  cursor: pointer;  height: 50px;  width: 70px;  padding: 12px 18px;  background-repeat: no-repeat;  background-position: center;  background-size: 50px;}.play {  background-image: url(./music2.png);}.pause {  background-image: url(./equalizer.png) !important;}

#music-button-container 和 #play-pause 设置了按钮的基本样式，包括尺寸、内边距和背景属性。.play 类设置了播放状态下的按钮背景图片。.pause 类设置了暂停状态下的按钮背景图片。!important 确保该样式覆盖其他样式。

3. JavaScript逻辑

最后，我们使用JavaScript来实现播放/暂停的切换功能。

立即学习“Java免费学习笔记（深入）”；

const music = document.getElementById('music-button');const controlButton = document.getElementById('play-pause');controlButton.addEventListener("click", () => {  if (music.paused || music.currentTime >= 0) {    music.play();    controlButton.classList.remove("play");    controlButton.classList.add("pause");  } else {    music.pause();    controlButton.classList.remove("pause");    controlButton.classList.add("play");  }});music.addEventListener("ended", () => {  controlButton.classList.remove("pause");  controlButton.classList.add("play");  music.currentTime = 0; // Reset audio to the beginning});

首先，我们获取音频元素和按钮元素的引用。我们为按钮添加一个点击事件监听器。当按钮被点击时，我们检查音频的播放状态。如果音频是暂停的，或者 currentTime 大于等于 0 (避免音频未加载时点击出错)，我们就播放音频，并将按钮的类名更改为 pause，从而切换按钮的背景图片。否则，我们就暂停音频，并将按钮的类名更改为 play。我们还为音频元素添加了一个 ended 事件监听器。当音频播放完毕时，我们将按钮的类名更改为 play，并将音频的播放时间重置为 0，以便下次可以从头播放。

4. 注意事项

确保音频文件的路径是正确的。currentTime >= 0 的条件可以避免在音频未加载时点击播放按钮出错的情况。可以使用 classList.add() 和 classList.remove() 来更方便地添加和删除类名。可以根据需要自定义按钮的样式和功能。

5. 总结

通过以上步骤，我们成功地创建了一个简单的音乐播放/暂停按钮。这个例子展示了如何使用HTML、CSS和JavaScript来控制音频元素的播放状态，以及如何根据播放状态动态改变按钮的样式。希望这个教程能帮助你理解并实现类似的功能。

以上就是使用JavaScript实现音乐播放/暂停按钮：一份详细教程的详细内容，更多请关注创想鸟其它相关文章！

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1522279.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
0 0

关于作者

程序猿的头像

程序猿签约作者

413.8K 文章
0 评论
2 粉丝
这个人很懒，什么都没有留下～
怎么使用JavaScript实现轮播图效果？
上一篇 2025年12月20日 14:54:55
将不同输入框的 onclick 值复制到剪贴板的函数
下一篇 2025年12月20日 14:55:06

相关推荐

  • Flexbox能否实现文字尾行跟随效果？ 用户投稿

    Flexbox能否实现文字尾行跟随效果？

    CSS布局技巧：巧用Flexbox和inline-block实现文字尾行跟随 本文探讨如何利用CSS布局，特别是结合Flexbox和inline-block，实现文字尾行跟随效果，并解决内容过长导致折行以及如何处理折行情况。 我们将重点关注如何利用Flexbox提升布局效率，并对比传统浮动布局的不足…

    程序猿的头像 程序猿
    2026年9月2日
    100
  • VSCode里怎么卸载TS_VSCode移除TypeScript及相关依赖包教程 用户投稿

    VSCode里怎么卸载TS_VSCode移除TypeScript及相关依赖包教程

    答案：彻底卸载TypeScript需禁用VSCode内置服务、卸载相关扩展并清理项目与全局的TypeScript包。首先在设置中调整typescript.tsdk路径或禁用自动类型获取，将.ts文件关联为纯文本；其次通过扩展面板卸载所有TypeScript相关插件；最后删除项目中的typescrip…

    程序猿的头像 程序猿
    2026年9月2日
    000

  • 标题: 如何使用 Composer 简化百度小程序开发：houyingcai/baidu-mini-sdk 的应用

    可以通过一下地址学习composer：学习地址 文章内容 在开发百度智能小程序的过程中，我遇到了一个棘手的问题：百度官方尚未发布完整的PHP SDK，仅有的百度收银台SDK也只支持生成和验证签名，无法满足实际开发需求。面对这种情况，我尝试了多种方法，最终找到了houyingcai/baidu-min…

    程序猿的头像 程序猿
    用户投稿 2026年9月2日
    000
  • 系统性能监视器_Windows资源监控工具 用户投稿

    系统性能监视器_Windows资源监控工具

    性能监视器是诊断windows系统性能瓶颈的核心工具，能深入分析cpu、内存、磁盘和网络的使用情况；2. 通过实时查看% processor time、available mbytes、pages/sec、avg. disk queue length等关键计数器，可快速定位资源瓶颈；3. 数据收集器…

    程序猿的头像 程序猿
    2026年9月2日
    100
  • VSCode怎么写CSS文件_VSCode创建和编写CSS样式表的详细方法与技巧教程 用户投稿

    VSCode怎么写CSS文件_VSCode创建和编写CSS样式表的详细方法与技巧教程

    首先在VSCode中创建CSS文件并编写样式，利用IntelliSense和Emmet实现智能补全与高效编码；接着通过模块化文件结构和扩展如CSS Peek管理大型项目；最后结合Live Server实时预览和浏览器开发者工具联动调试，提升CSS开发效率。 VSCode中编写CSS文件远比你想象的要…

    程序猿的头像 程序猿
    2026年9月2日
    000

  • 上海欢乐谷停车场收费指南

    上海欢乐谷停车场收费指南上海欢乐谷停车场收费指南上海欢乐谷停车场收费指南上海欢乐谷停车场收费指南

    1、 电脑开启ie浏览器，见图中红框标注处。 2、 打开百度，点击搜索框，中红色框所示位置。 3、 输入上海欢乐谷，见红色文本框所示。 4、 进入欢乐谷后，按红色箭头方向向下拉动。 5、 查看红色标注区域，获取服务设施及停车场详情。 6、 上海欢乐谷停车场收费详情已查。 以上就是上海欢乐谷停车场收费…

    程序猿的头像 程序猿
    2026年9月2日 • 用户投稿
    000
  • 后台管理页面跳转：如何优雅地保留搜索表单参数？ 用户投稿

    后台管理页面跳转：如何优雅地保留搜索表单参数？

    后台管理系统页面跳转时如何优雅地保留搜索表单参数？本文探讨几种优于直接拼接URL参数的解决方案，提升用户体验和代码可维护性。 在后台管理系统中，数据展示页（A页）与数据新增/编辑页（B页）间的跳转常常需要保留A页的搜索条件。直接在URL中拼接参数虽然简单，但可维护性和可读性差，尤其在多个跳转场景下。…

    程序猿的头像 程序猿
    2026年9月2日
    000

  • uc浏览器怎么免费解压 你用UC浏览器免费解压

    uc浏览器怎么免费解压 你用UC浏览器免费解压uc浏览器怎么免费解压 你用UC浏览器免费解压uc浏览器怎么免费解压 你用UC浏览器免费解压uc浏览器怎么免费解压 你用UC浏览器免费解压

    我们使用uc浏览器下载文件时，可能会遇到一些压缩文件无法直接在手机上打开的情况。这时候应该如何解压这些压缩文件呢？以下是通过uc浏览器免费解压压缩文件的操作步骤。 第一步：启动UC浏览器，在主界面找到并点击“下载/文件”图标。 第二步：进入下载页面后，定位到你需要解压的压缩包，随后点击右上角的“&#…

    程序猿的头像 程序猿
    2026年9月2日 • 用户投稿
    100
  • 术业有专攻——AI系统主控CPU英特尔至强6新品处理器浅析 用户投稿

    术业有专攻——AI系统主控CPU英特尔至强6新品处理器浅析

    一、至强6与nvidiagpu协同的硬件基础 在AI异构计算架构中，英特尔至强6处理器作为主控CPU可以与NVIDIA新GPU很好地协同。根据英伟达官网信息，目前其DGXB300系统选择至强6776P作为主控CPU，采用双路配置，通过UPI总线实现CPU间互连。这8个GPU通过NVLink高速互连，…

    程序猿的头像 程序猿
    2026年9月2日
    100
  • 传苹果与阿里巴巴合作 为中国iPhone引入人工智能功能 用户投稿

    传苹果与阿里巴巴合作 为中国iPhone引入人工智能功能

    ☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 免费无限量使用 DeepSeek R1 模型☜☜☜ 消息人士透露，苹果公司正与阿里巴巴展开合作，为中国地区的iPhone用户带来全新的人工智能功能。 据报道，苹果公司此前曾与百度合作，但由于百度在模型开发方面未能达到预期，合作最终未能成功。此后，…

    程序猿的头像 程序猿
    2026年9月2日
    100

  • edge app怎么清理干净 Edge app删除历史记录方法

    edge app怎么清理干净 Edge app删除历史记录方法edge app怎么清理干净 Edge app删除历史记录方法edge app怎么清理干净 Edge app删除历史记录方法edge app怎么清理干净 Edge app删除历史记录方法

    打开edge浏览器，点击底部的【菜单】。 在弹出的窗口中，选择并点击【历史记录】。 进入页面后，点击右上角的【删除】按钮。 随后跳转的界面中，点击【立即清除】即可完成操作。 以上就是edge app怎么清理干净 Edge app删除历史记录方法的详细内容，更多请关注创想鸟其它相关文章！

    程序猿的头像 程序猿
    2026年9月2日 • 用户投稿
    100
  • Next.js页面中的``元素如何正确设置样式？ 用户投稿

    Next.js页面中的“元素如何正确设置样式？

    next.js应用中_next元素的样式设置详解及疑难解答 在使用Next.js页面路由模式构建项目时，你可能会遇到一个名为 的元素。本文将解释该元素的用途，并指导你如何正确设置其样式，解决诸如全屏布局和水平垂直居中之类的布局问题。 许多开发者在尝试设置该元素的样式时，会遇到问题。例如，无法通过父组…

    程序猿的头像 程序猿
    2026年9月2日
    000

  • 使用 Laravel Config Writer 库简化配置文件管理

    在 laravel 项目开发中，配置文件的动态管理一直是个挑战。手动修改配置文件不仅容易出错，还会打乱文件的结构和注释，导致维护困难。为了解决这个问题，我尝试了多种方法，最终找到了 shah-newaz/laravel-config-writer 这个库。 shah-newaz/laravel-co…

    程序猿的头像 程序猿
    用户投稿 2026年9月2日
    300
  • 悟空浏览器怎么下载安装在电脑里 电脑端悟空浏览器下载安装详细教程分享 用户投稿

    悟空浏览器怎么下载安装在电脑里 电脑端悟空浏览器下载安装详细教程分享

    悟空浏览器没有官方电脑版，只能通过安卓模拟器在电脑上使用，具体方法是先安装夜神、雷电或蓝叠等安卓模拟器，再在模拟器中下载悟空浏览器app并运行；其未推出电脑版的原因在于产品定位聚焦移动端，旨在集中资源优化手机端用户体验，避免在桌面端与chrome、edge等成熟浏览器直接竞争，从而实现更高的投入产出…

    程序猿的头像 程序猿
    2026年9月2日
    300
  • 如何高效地对后台返回数据进行二次排序，实现前端相邻数据展示？ 用户投稿

    如何高效地对后台返回数据进行二次排序，实现前端相邻数据展示？

    前端数据排序：实现相邻数据展示 前端开发中，经常需要对后台返回的数据进行二次排序，以满足特定的展示需求。本文将介绍如何处理异步获取的数据，并按照appeal_type和detail_appeal_type字段进行排序，确保相同类型的数据相邻显示。 问题：后台返回的JSON数据已按staff字段排序，…

    程序猿的头像 程序猿
    2026年9月2日
    100
  • 首次！突破世纪难题 我国成功研制出新型芯片：算力达顶级GPU的1000倍以上 用户投稿

    首次！突破世纪难题 我国成功研制出新型芯片：算力达顶级GPU的1000倍以上

    10月14日，据《科技日报》报道，我国科研团队成功研发出一款新型芯片，其算力可超越当前顶级gpu千倍以上，攻克了长期困扰模拟计算领域的世纪难题。 此次成果由北京大学人工智能研究院孙仲研究员团队联合集成电路学院研究团队共同完成，成功研制出基于阻变存储器的高精度、可扩展模拟矩阵计算芯片，首次构建出在计算…

    程序猿的头像 程序猿
    2026年9月2日
    500

  • 如何使用 Composer 简化支付系统集成：Dagpay PHP 客户端的实际应用

    可以通过一下地址学习composer：学习地址 在开发一个电子商务平台时，支付系统的集成一直是开发过程中一个关键但复杂的环节。尤其是当你需要处理不同货币和支付方式时，问题会变得更加棘手。我曾经尝试过手动集成支付API，但这不仅耗时，而且容易出错。最终，我找到了 Dagpay 的 PHP 客户端，这是…

    程序猿的头像 程序猿
    用户投稿 2026年9月2日
    100

  • Hotmail登录方法指南

    Hotmail登录方法指南Hotmail登录方法指南Hotmail登录方法指南Hotmail登录方法指南

    打开浏览器，在搜索栏中输入“Hotmail邮箱”，然后点击出现的第一个链接进入官网页面，注意确认网址正确，避免误入仿冒网站。 进入官方网站后，选择“创建免费账户”选项，开始注册新的Hotmail邮箱账号。 按照页面提示填写所需的个人信息，包括希望使用的邮箱名称，完成后点击“下一步”继续。 设置登录密…

    程序猿的头像 程序猿
    2026年9月2日 • 用户投稿
    100
  • 山东大学集成电路学院获批2项山东省本科教学改革研究项目 用户投稿

    山东大学集成电路学院获批2项山东省本科教学改革研究项目

    ☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 免费无限量使用 DeepSeek R1 模型☜☜☜ 山东大学集成电路学院在2024年度山东省本科教学改革研究项目评选中取得佳绩，成功获得1项重点项目和1项面上项目立项资助，标志着学院在省级教改项目领域取得了新的突破。 此次立项，是学院积极响应《关…

    程序猿的头像 程序猿
    2026年9月2日
    100
  • Next.js页面被``元素包裹，如何解决样式设置难题？ 用户投稿

    Next.js页面被“元素包裹，如何解决样式设置难题？

    next.js页面被 元素包裹导致样式设置困难的解决方法 在使用Next.js页面路由模式开发项目时，开发者经常会遇到一个 元素包裹整个页面的情况。这给自定义页面样式，例如实现100%高度和水平垂直居中布局，带来了挑战。本文将解释此元素的来源及解决方法。 问题：开发者尝试使用#next {}选择器在…

    程序猿的头像 程序猿
    2026年9月2日
    200

发表回复

登录后才能评论
关注微信