原生JS实现小小的音乐播放器

原生JS实现小小的音乐播放器

概述

小小的音乐播放器是一个使用原生JS实现的简单的Web音乐播放器,由于功能简单,易于理解和操作,因此适合JS初学者学习。本攻略将分为以下几个部分:

  1. 开始
  2. HTML结构
  3. CSS样式
  4. JS功能
  5. 示例说明
  6. 结束

开始

首先,我们需要一个开发环境,可以使用如下几种:

  1. Notepad++
  2. Visual Studio Code
  3. Atom
  4. Sublime Text

在这里,我们以Visual Studio Code为例,进行说明。

HTML结构

接着,我们将使用HTML来定义播放器的界面结构。实现的音乐播放器有如下几个组成部分:

  • 播放/暂停按钮
  • 进度条
  • 声音控制条
  • 歌曲时间/总时间显示框
  • 音量/音量静音按钮
  • 音乐标题

HTML代码如下:

<div class="audio-player">
  <div class="controls">
    <button id="play-pause-button" class="play"></button>
    <div class="progress-bar">
      <div id="progress"></div>
    </div>
    <div class="time-indicator">
      <span id="time">0:00</span> / <span id="duration">0:00</span>
    </div>
    <div class="volume">
      <button id="volume-button" class="unmute"></button>
      <input type="range" id="volume-slider" min="0" max="1" step="0.01" value="1">
    </div>
  </div>
  <div class="song-info">
    <span id="song-title">Song title</span>
  </div>
  <audio id="audio-player">
    <source src="music.mp3" type="audio/mpeg">
  </audio>
</div>

CSS样式

在HTML部分完成后,我们需要为其内部元素定义CSS样式。CSS代码如下:

.audio-player {
  width: 360px;
  background-color: #333;
  color: #fff;
  font-family: Arial, sans-serif;
  padding: 20px;
  border-radius: 10px;
}

.controls {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.progress-bar {
  flex-grow: 1;
  margin: 0 10px;
  height: 5px;
  background-color: #666;
}

.progress-bar #progress {
  height: 100%;
  background-color: #fff;
  width: 0%;
  transition: width 0.1s linear;
}

.time-indicator {
  font-size: 12px;
}

.volume {
  display: flex;
  align-items: center;
  margin-left: 10px;
}

.volume input[type="range"] {
  -webkit-appearance: none;
  width: 50px;
  height: 5px;
  background-color: #666;
  margin-left: 10px;
}

.volume input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  background-color: #fff;
  height: 16px;
  width: 16px;
  border-radius: 50%;
  cursor: pointer;
}

.song-info {
  text-align: center;
  font-size: 18px;
  margin-top: 10px;
}

#song-title {
  font-weight: bold;
}

button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  margin-right: 10px;
  width: 20px;
  height: 20px;
  padding: 0;
}

.play::before {
  content: "►";
  font-size: 18px;
}

.pause::before {
  content: "❚❚";
  font-size: 18px;
}

.unmute::before {
  content: "?";
  font-size: 12px;
}

.mute::before {
  content: "?";
  font-size: 12px;
}

JS功能

HTML和CSS部分完成后,我们需要使用JS实现播放器的主要功能。具体来说,我们至少需要实现如下几个功能:

  1. 播放/暂停歌曲
  2. 显示歌曲时间/总时间
  3. 改变播放进度
  4. 改变音量
  5. 静音/取消静音

完整的JS代码如下:

const audio = document.getElementById("audio-player");
const playPauseButton = document.getElementById("play-pause-button");
const progress = document.getElementById("progress");
const timeDisplay = document.getElementById("time");
const durationDisplay = document.getElementById("duration");
const volumeButton = document.getElementById("volume-button");
const volumeSlider = document.getElementById("volume-slider");
const songTitle = document.getElementById("song-title");

function playPause() {
  if (audio.paused) {
    audio.play();
    playPauseButton.classList.remove("play");
    playPauseButton.classList.add("pause");
  } else {
    audio.pause();
    playPauseButton.classList.remove("pause");
    playPauseButton.classList.add("play");
  }
}

function updateTime() {
  timeDisplay.innerHTML = formatTime(audio.currentTime);
  progress.style.width = (audio.currentTime / audio.duration) * 100 + "%";
}

function updateDuration() {
  durationDisplay.innerHTML = formatTime(audio.duration);
}

function changeTime(e) {
  const newTime = e.offsetX / progress.clientWidth * audio.duration;
  audio.currentTime = newTime;
}

function changeVolume() {
  audio.volume = volumeSlider.value;
  if (audio.volume === 0) {
    volumeButton.classList.remove("unmute");
    volumeButton.classList.add("mute");
  } else {
    volumeButton.classList.remove("mute");
    volumeButton.classList.add("unmute");
  }
}

function mute() {
  if (audio.volume !== 0) {
    audio.volume = 0;
    volumeButton.classList.remove("unmute");
    volumeButton.classList.add("mute");
  } else {
    audio.volume = volumeSlider.value;
    volumeButton.classList.remove("mute");
    volumeButton.classList.add("unmute");
  }
}

function formatTime(time) {
  const minutes = Math.floor(time / 60);
  const seconds = Math.round(time % 60);
  return `${minutes}:${seconds < 10 ? "0" : ""}${seconds}`;
}

audio.addEventListener("timeupdate", updateTime);
audio.addEventListener("loadedmetadata", updateDuration);
progress.parentElement.addEventListener("click", changeTime);
volumeSlider.addEventListener("input", changeVolume);
volumeButton.addEventListener("click", mute);
playPauseButton.addEventListener("click", playPause);

示例说明

以上代码实现了一个简单的音乐播放器,您可以在自己的网站或浏览器中使用它播放MP3格式的音乐文件。在使用过程中,您可以试着进行以下两种修改,来感受代码的实际效果:

  1. 将"music.mp3"替换为您自己的音乐文件路径,在index.html中更新。
  2. 修改CSS样式,将音乐播放器的UI界面进行自定义。

结束

至此,我们已经完成了“原生JS实现小小的音乐播放器”的攻略。希望这篇文章对您有所帮助并且对您的JS学习有所帮助。如果您有任何问题或者建议,请在下方评论区留言。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:原生JS实现小小的音乐播放器 - Python技术站

(0)
上一篇 2023年6月11日
下一篇 2023年6月11日

相关文章

  • FileSystemObject 示例代码

    我将为您详细讲解“FileSystemObject 示例代码”的完整攻略。 标题 在阐述 FileSystemObject 示例代码的过程中,我们需要先介绍 FileSystemObject 对象,然后再给出一些示例代码。 FileSystemObject 对象 FileSystemObject 对象是 JavaScript 中的一个内置对象,用于访问文件系…

    JavaScript 2023年6月11日
    00
  • JavaScript this指向相关原理及实例解析

    JavaScript this指向相关原理及实例解析 JavaScript 中的 this 关键字是一个引起很多初学者困惑的概念。它被用来引用运行时上下文中的当前对象,但是在不同的语法结构和调用方式下,其指向的对象也会发生改变。本文将详细讲解 JavaScript 中 this 的指向原理及实例解析。 什么是 this? 在 JavaScript 中,thi…

    JavaScript 2023年6月11日
    00
  • JS赋值、浅拷贝和深拷贝(数组和对象的深浅拷贝)实例详解

    JS赋值、浅拷贝和深拷贝 在JavaScript开发中,我们经常需要对变量进行赋值操作,同时还需要将对象或数组复制到另一个变量中。这些操作看起来很简单,但如果不理解JavaScript中变量存储的方式,就容易引出一些微妙的问题。本文将简单介绍JS赋值、浅拷贝和深拷贝。 JS赋值 JS赋值操作可以将一个变量的值赋给另一个变量。这是一种基本的操作,也是很容易看懂…

    JavaScript 2023年5月27日
    00
  • javascript 两个字符串比较函数

    下面是关于 JavaScript 字符串比较函数的完整攻略。 在 JavaScript 中比较字符串时,有两个比较函数可以使用: localeCompare():用于比较给定字符串与目标字符串的顺序关系,根据本地化规则和当前语言环境来进行比较,支持多种语言。该函数返回一个数字,表示两个字符串的大小关系。 charCodeAt():返回字符串中指定位置的字符的…

    JavaScript 2023年5月28日
    00
  • vue3中router路由以及vuex的store使用解析

    Vue3是当前前端领域最流行的框架之一,它提供了一些重要的功能模块,如路由、状态管理等,允许我们轻松构建复杂的单页应用程序。在本篇文章中,我们将详细阐述Vue 3中Router路由以及Vuex的Store使用解析,从而帮助您快速掌握这些关键功能。 Router路由 安装和使用Router 首先让我们来介绍Vue 3中的Router路由,这是一个非常重要的功能…

    JavaScript 2023年6月11日
    00
  • JS动态创建Table,Tr,Td并赋值的具体实现

    下面是“JS动态创建Table,Tr,Td并赋值的具体实现”的攻略。 实现方法 使用JavaScript可以很方便地动态创建表格,具体步骤如下: 创建一个 元素,用于存放动态创建的表格。 使用JavaScript的循环语句,例如for循环或while循环,根据需要动态创建需要的行(tr)和列(td)。 在创建每个行(tr)时,使用循环语句动态创建所需的列(t…

    JavaScript 2023年6月11日
    00
  • JS开发中基本数据类型具体有哪几种

    为了介绍 JS 开发中的基本数据类型,我们需要从以下几个方面进行介绍。 1. JS 基本数据类型 JS 中的基本数据类型有以下五种: Number(数字类型) String(字符串类型) Boolean(布尔类型) Undefined(未定义类型) Null(空类型) 这些基本数据类型在 JS 中可以通过相应关键字来定义变量,例如: let num = 12…

    JavaScript 2023年5月28日
    00
  • 原生js实现节日时间倒计时功能

    对于网站开发者来说,实现节日倒计时功能是一个很有趣的项目。下面是实现节日时间倒计时功能的完整攻略: 1. HTML 结构 <p id="countdown"></p> 在 HTML 中建立一个计时器的 DOM 元素,在本例中是一个段落元素,被赋予 ID 为 countdown。 2. JavaScript 代码 创…

    JavaScript 2023年5月27日
    00
合作推广
合作推广
分享本页
返回顶部