使用 JavaScript 构建音乐播放器

随着流媒体技术在用户中的普及日益增加，在线媒体播放器已成为互联网上消费媒体的必备工具。音乐播放器让人们可以在任何浏览器中享受音乐，并支持许多离线音乐播放器的功能。

我们将创建一个具有整洁用户界面的音乐播放器，可用于在浏览器中播放音乐。我们还将实现诸如音轨定位和音量控制等功能。HTML 在 HTMLMediaElement 接口中提供了多种方法，可用于播放音频文件并控制其播放，而无需使用任何其他库。

我们将首先创建定义播放器结构的 HTML 布局，然后使用 CSS 通过样式使其美观，最后用 JavaScript 编写所有功能的播放器逻辑。

HTML 布局

HTML 布局定义了将显示在页面上的元素结构。播放器可以分为以下几个部分：

• 详情部分：此部分显示当前播放曲目的详细信息。它包括曲目编号、专辑、曲目名称和艺术家。
• 按钮部分：此部分显示用于控制曲目播放的按钮。它包括播放/暂停按钮、上一曲和下一曲按钮。它们将有一个 onclick() 方法，调用 JavaScript 文件中定义的特定函数。
• 滑块部分：此部分包含用于控制播放和音量的定位滑块和音量滑块。

我们将使用 FontAwesome 图标来获取页面上所有按钮的图标。文件中还链接了我们稍后将要编写的自定义 CSS 和 JavaScript。

HTML 代码如下：

  
  
  

  
  


  


    
    

      
PLAYING x OF y
      

      
Track Name
      
Track Artist
    

    
    

      

        
      
      

        
      
      

        
      
    

    
    

      
00:00
      
      
00:00
    

    
    

      
      
      
    
  

  
  

CSS 样式

使用 CSS，我们可以为不同部分设置样式，使其更具视觉吸引力：

• 使用弹性布局来排列播放器的各个元素，并将它们对齐到页面中间。
• 专辑封面图片被赋予固定尺寸，并使用 border-radius 属性使其变为圆形。
• 通过使用 INLINECODE635bd7e2 属性，两个滑块都从默认外观进行了修改。高度和背景颜色已更改以适应配色方案。它们还被赋予了轻微的透明度，并使用 INLINECODE8c15930e 属性平滑过渡到完全不透明。
• 所有播放控件的 cursor 属性都已设置，以便当鼠标悬停在其上时，光标会变为指针形状。

body {
  background-color: lightgreen;

  /* Smoothly transition the background color */
  transition: background-color .5s;
}

/* Using flex with the column direction to
   align items in a vertical direction */
.player {
  height: 95vh;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}

.details {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  margin-top: 25px;
}

.track-art {
  margin: 25px;
  height: 250px;
  width: 250px;
  background-image: URL(
     "https://source.unsplash.com/Qrspubmx6kE/640x360");
  background-size: cover;
  background-position: center;
  border-radius: 50%;
}

(注：CSS 代码在原文中未完全显示，这里展示了其核心风格设计思路)