<本地音乐播放器>制作入门：零基础小白，一步一个脚印！

2023-04-20 16:14:33

本地音乐播放器制作入门：一步一个脚印

准备工作

准备好制作音乐播放器所需的工具：文本编辑器（如记事本、Sublime Text）、浏览器（如Chrome、Firefox）、以及你的音乐文件。

创建HTML文件

创建一个名为music.html的HTML文件，并添加以下代码：

<!DOCTYPE html>
<html>
<head>

</head>
<body>
<audio id="audioPlayer" controls>
<source src="music.mp3" type="audio/mpeg">
</audio>
</body>
</html>

添加CSS样式

创建一个style.css文件，并添加以下代码来美化播放器：

body {
  font-family: sans-serif;
}

audio {
  width: 100%;
}

添加JS脚本

创建一个script.js文件，添加以下代码实现基本功能：

const audioPlayer = document.getElementById('audioPlayer');

audioPlayer.addEventListener('play', () => {
  console.log('音乐开始播放');
});

audioPlayer.addEventListener('pause', () => {
  console.log('音乐暂停播放');
});

audioPlayer.addEventListener('ended', () => {
  console.log('音乐播放结束');
});

实现音频可视化

使用Wavesurfer.js等库实现音频可视化。在HTML文件中添加：

<script src="wavesurfer.js"></script>

<canvas id="waveform" width="100%" height="100"></canvas>

在JS文件中添加：

const wavesurfer = WaveSurfer.create({
  container: '#waveform',
  waveColor: '#ffffff',
  progressColor: '#000000',
  cursorColor: '#ff0000',
  barWidth: 2,
  barHeight: 1,
  barGap: 1,
  responsive: true,
  fillParent: true
});

wavesurfer.load('music.mp3');