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

在当今的互联网应用中，音乐播放器是一个不可或缺的功能模块。本文将通过使用原生JavaScript（JS）来详细讲解如何实现一个基本的音乐播放器，包括对播放列表的管理、播放控制、随机播放、循环播放、进度条显示、音量控制以及显示播放时间等核心功能。该音乐播放器能够为用户提供一个基础但完整的音乐播放体验。 音乐播放器的主要功能包括： 1. 支持循环播放（Loop）：音乐播放完成后，自动从列表中选择一首歌曲继续播放。 2. 支持随机播放（Random）：在所有歌曲中随机选择一首作为下一支播放歌曲。 3. 在播放的同时支持图片的旋转：为用户提供视觉上的互动，增加用户体验。 4. 支持点击进度条调整播放位置：允许用户通过鼠标点击进度条跳转到音乐的特定时刻。 5. 支持调整音量：通过控制音量滑块，用户可以调节音乐播放的音量大小。 6. 显示音乐的播放时间：以时钟的形式展示当前音乐的已播放时间和总时长。 7. 支持切歌：实现上一首、下一首的功能，以及通过点击歌名切换歌曲。 8. 支持暂停播放：点击暂停后，音乐播放停止，并且进度条、图片旋转和播放时间计时均暂停。 要使用原生JS实现这样一个音乐播放器，通常有两种方式来添加音乐： ① 使用多个audio标签，每个标签对应一首歌曲。这种方法在HTML代码中看起来较为直观。 ② 将所有音乐地址存放到一个数组中，然后动态地创建audio标签和对应的source元素。 无论是采取哪种方式，都可以通过JavaScript来控制音乐播放器的行为。以下是实现这些功能的主要步骤和相关的代码示例： 1. 初始化播放列表：首先将所有歌曲的链接存放在一个数组中，然后创建对应的audio元素。 ```javascript var songs = [ "audio/旅行.mp3", "audio/薛明媛,朱贺-非酋.mp3", "audio/杨宗纬-越过山丘.mp3" ]; var play = []; // 存放所有的audio元素 for(var i = 0; i < songs.length; i++) { var audio = new Audio(); audio.src = songs[i]; play.push(audio); } ``` 2. 控制播放/暂停功能：通过监听播放按钮的点击事件，实现播放和暂停的切换。 ```javascript var index = 0; // 当前播放的歌曲索引 var flag = 0; // 控制图片旋转的标志 function start() { if(flag) { // 暂停播放时的操作 imagePause(); play[index].pause(); } else { // 开始播放时的操作 rotate(); play[index].play(); reducejindutiao(); addtime(); jindutiao(); } // 播放状态下，索引歌曲对应的audio颜色变为红色 for(var i = 0; i < play.length; i++) { play[i].style.color = "white"; } play[index].style.color = "red"; } ``` 3. 实现图片的旋转效果：当音乐播放时，使与之关联的图片旋转起来。 ```javascript var deg = 0; // 图片旋转的当前度数 var timer; // 定时器 var flag = 0; // 图片是否正在旋转的标志 function rotate() { timer = setInterval(function() { image.style.transform = "rotate(" + deg + "deg)"; deg += 5; if(deg > 360){ deg = 0; } }, 30); flag = 1; } function imagePause() { clearInterval(timer); flag = 0; } ``` 4. 进度条控制：进度条随着音乐播放的进度实时更新。 ```javascript function jindutiao() { var lenth = play[index].duration; var timer1 = setInterval(function() { var cur = play[index].currentTime; fillbar.style.width = parseFloat(cur/lenth)*300 + "px"; }, 50); } ``` 5. 显示播放时间：更新页面上显示的歌曲播放时长。 ```javascript function addtime() { var timer2 = setInterval(function() { var cur = parseInt(play[index].currentTime); var temp = cur; var minute = parseInt(temp/60); var time = document.getElementById("time"); if(cur % 60 < 10){ time.innerHTML = minute + ":0" + cur % 60; } else { time.innerHTML = minute + ":" + cur % 60; } }, 1000); } ``` 6. 切换歌曲：实现上一首、下一首和点击歌名切换歌曲的功能。 ```javascript function next() { index = (index + 1) % play.length; start(); } function prev() { index = (index - 1 + play.length) % play.length; start(); } ``` 通过上述代码和功能实现，我们可以创建一个基础的音乐播放器。开发者可以根据自己的需求调整和增加额外的功能，如动态加载音乐、保存播放状态、用户交互界面美化等，进一步完善音乐播放器的应用体验。