使用JavaScript实现简易音乐播放器 | 青训营

77 阅读2分钟

如何使用JavaScript实现某个功能或解决某个问题?

JavaScript是一种非常灵活和强大的编程语言,它可以用来实现各种功能或解决各种问题。

  • 使网页具有交互性,例如响应用户点击,给用户提供更好的体验
  • 可以处理表单,检验用户的输入,并提供及时反馈节省用户时间。例如,表单中要你输入电子邮箱而你却输入一个手机号,那么应该给你一个提醒。
  • 还可以根据用户的操作,动态的创建页面。例如,发邮件时,添加附件操作。
  • 设置cookie,cookie是存储在浏览器上的一些临时信息,例如你浏览过的网站地址,使用过的用户名

使用JavaScript实现一个简易的音乐播放器

HTML

HTML是用来标记内容的,重在内容组织上,是超文本标记语言的简称。它用各种标签将页面中的元素组织起来,告诉浏览器如何显示其中的内容。

屏幕截图 2023-08-30 134328.png

屏幕截图 2023-08-30 134353.png

CSS

CSS是用来修饰内容样式的,重在内容样式美化展示上,是层叠样式表的简称,简单地说就是负责HTML页面中元素的展现及排版。

屏幕截图 2023-08-30 134806.png

屏幕截图 2023-08-30 134825.png

屏幕截图 2023-08-30 134837.png

屏幕截图 2023-08-30 134854.png

屏幕截图 2023-08-30 134909.png

屏幕截图 2023-08-30 134923.png

屏幕截图 2023-08-30 135003.png

屏幕截图 2023-08-30 135018.png

JavaScript

  • JavaScript是用来做交互的,是一种脚本语言,既可以运行在客户端也能运行在服务器端。
  • 功能:控制音乐的播放和暂停,上一首,下一首,播放完成及相应图标和文字的修改,音乐进度条的拖动和变化。将音乐文件和图片文件下载后存储在文件夹中,输入文件路径。

屏幕截图 2023-08-30 135139.png

音乐图片

屏幕截图 2023-08-30 140702.png

屏幕截图 2023-08-30 140712.png

音乐进度条控制

屏幕截图 2023-08-30 140541.png

音乐播放器效果

屏幕截图 2023-08-30 135444.png

屏幕截图 2023-08-30 135501.png

屏幕截图 2023-08-30 135511.png