原生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日

相关文章

  • JavaScript定义函数的三种实现方法

    下面就为大家详细讲解JavaScript定义函数的三种实现方法。 方法一:函数声明 函数声明是定义函数的最基本方法。 语法格式如下: function functionName(arg1, arg2, …) { //函数体 } 其中 functionName 是函数名,arg1, arg2, … 是形参,函数体可以是任意 JavaScript 代码。…

    JavaScript 2023年5月27日
    00
  • javascript 解决表单仍然提交即使监听处理函数返回false

    当我们使用JavaScript对表单进行监听处理时,通常会添加一个事件处理函数,并在函数中使用return false语句来阻止表单的提交。但是,在某些情况下,仍然有可能发生表单提交的情况,这时我们需要采取其他措施来确保表单不会提交。下面是一些解决方法: 1. 使用preventDefault方法 preventDefault()方法可以阻止元素发生默认行为…

    JavaScript 2023年6月10日
    00
  • js校验表单后提交表单的三种方法总结

    JS校验表单后提交表单有三种方法总结,分别是: 1.提交前在JS验证,如果无误则提交。 2.在提交按钮上绑定函数,在函数中判断表单是否填写正确。 3.在表单提交时,拦截表单提交请求,验证表单数据后提交。 下面我将会对上述每个方法进行详细讲解,并提供示例: 1.提交前在JS验证,如果无误则提交 这个方法是最基本的方法,它的核心是在提交表单之前进行验证。我们可以…

    JavaScript 2023年6月10日
    00
  • JavaScript日期类型的一些用法介绍

    JavaScript日期类型的一些用法介绍 Date类型的创建 Date类型可以使用new操作符创建,也可以使用字符串形式创建。以下是这两种方式分别的示例: // 使用new操作符创建Date实例 const now = new Date(); console.log(now); // 输出当前时间 // 使用字符串形式创建Date实例 const some…

    JavaScript 2023年5月27日
    00
  • javascript日期处理函数,性能优化批处理

    针对javascript日期处理函数以及性能优化批处理,以下为完整攻略: Javascript日期处理函数 Date对象 Javascript内置Date对象可以用来处理日期和时间。它与其他许多语言中的日期/时间API相似,但也有一些特殊之处。 创建Date对象 var dateNow = new Date(); // 返回当前日期和时间 var dateM…

    JavaScript 2023年5月27日
    00
  • 一个用javascript写的select支持上下键、首字母筛选以及回车取值的功能

    要实现一个用JavaScript写的Select支持上下键、首字母筛选以及回车取值的功能可以分为以下几个步骤: 创建一个select元素并隐藏原生的下拉列表。可以使用CSS的display:none或者position:absolute; left:-9999px; 等方法来实现。 <select id="mySelect" sty…

    JavaScript 2023年6月11日
    00
  • 使用 Opentype.js 生成字体子集的实例代码详解

    使用 Opentype.js 生成字体子集的实例代码详解 什么是 Opentype.js Opentype.js 是一个 JavaScript 库,主要用于解析和操作 OpenType 字体。通过使用 Opentype.js,我们可以将 OpenType 字体嵌入到 Web 页面中,并对其进行各种操作,如显示、排版、模糊和旋转等。 什么是字体子集 字体子集是…

    JavaScript 2023年5月27日
    00
  • javascript计时器事件使用详解

    JavaScript计时器事件使用详解 JavaScript中的计时器事件(Timer)是一种常见的定时执行代码的方法,它可以在一段时间间隔内,重复执行指定的JavaScript代码,或在指定的时间后执行一次。 setInterval()方法 setInterval()方法是一个常用的计时器事件函数,它可以重复地在指定时间间隔内执行指定的JavaScript…

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