861模板网站 > 网页特效 > 其它特效 > js网页欢快的磁带录音机mp3音乐播放代码

js网页欢快的磁带录音机mp3音乐播放代码

在网络上播放音乐已经成为了生活中不可缺少的一部分。然而，在网站中嵌入一个好看的音乐播放器可能对访问者有很大吸引力。在本篇文章中，我们将学习如何使用JavaScript创建一个欢快的磁带录音机型的音乐播放器，让你的网页变得更加生动。我们将介绍如何通过JavaScript实现这个效果，并提供相应的代码。

我们需要在HTML文件中定义一个 audio 元素并赋予一个唯一的 ID，用于在 JavaScript 中进行控制。代码如下：

<audio id="audio-player" src="music.mp3"></audio>

我们需要在 HTML 中添加一个 div 元素用于承载音乐播放器的界面，并在其中添加所需的控制按钮。代码如下：

<div id="music-player">
  <div id="play-button" class="player-button" onclick="playMusic()"></div>
  <div id="stop-button" class="player-button" onclick="stopMusic()"></div>
  <div id="rewind-button" class="player-button" onclick="rewindMusic()"></div>
  <div id="forward-button" class="player-button" onclick="forwardMusic()"></div>
  <div id="counter"></div>
</div>

在这个 div 中，我们定义了四个控制按钮：play-button，用于播放音乐；stop-button，用于停止音乐；rewind-button，用于回放音乐；forward-button，用于快进。还有一个 div 元素用于展示音乐播放时间的计数器。在这些控制按钮上，我们添加一个 onclick 事件，用于触发 JavaScript 中定义的函数，以控制音乐播放和时间计数器的操作。

我们需要在 CSS 中设置播放器的样式。我们给播放器元素设置一个矩形边框，添加一些内边距，以增加其可读性和外观。代码如下：

#music-player {
  border: 3px solid #3B3B3B;
  background-color: #A8A8A8;
  padding: 20px;
  width: 400px;
  height: 200px;
  border-radius: 20px;
  display: inline-block;
}

我们定义每个 button 的样式，以及位置。同时，我们使用 CSS 的伪类 hover 添加一些简单的动画效果。代码如下：

.player-button {
  width: 50px;
  height: 50px;
  margin: 20px;
  border-radius: 50%;
  display: inline-block;
  background-color: #3B3B3B;
  cursor: pointer;
}

.player-button:hover {
  opacity: 0.7;
}

我们可以开始写JavaScript代码来控制播放器。我们需要定义一个变量来保存音乐播放器，通过获取元素 ID，我们可得到音频元素节点。代码如下：

var audioPlayer = document.getElementById('audio-player');

我们还需要去定义一些代表控制按钮的变量，以便于绑定相应的事件监听器。代码如下：

var playButton = document.getElementById('play-button');
var stopButton = document.getElementById('stop-button');
var rewindButton = document.getElementById('rewind-button');
var forwardButton = document.getElementById('forward-button');
var counter = document.getElementById('counter');

我们需要定义一些函数来控制音乐播放器。我们需要函数来播放音乐、停止音乐、回放音乐以及快进。代码如下所示：

function playMusic() {
  audioPlayer.play();
}

function stopMusic() {
  audioPlayer.pause();
  audioPlayer.currentTime = 0;
}

function rewindMusic() {
  audioPlayer.currentTime -= 5;
}

function forwardMusic() {
  audioPlayer.currentTime += 5;
}

我们还需要定义一个用于更新时间计数器的函数。在这个函数中，我们获取音乐播放时间并将其显示出来。代码如下：

audioPlayer.addEventListener('timeupdate', function() {
  var currentTime = Math.floor(audioPlayer.currentTime);
  var minutes = Math.floor(currentTime / 60);
  var seconds = currentTime - minutes * 60;
  counter.innerHTML = minutes + ':' + (seconds < 10 ? '0' + seconds : seconds);
});