js音乐播放器
2022.07.31 13:23 | 访问量:
虽说是自己写的，其实也是网上查了很多，东拼西凑的
首先，该播放器就是左下角的那个，支持顺序播放，随机播放，上一首下一首，调节音量，在Chrome的MediaSession媒体控件中显示专辑图等
我是直接用的网易云的音乐和专辑图，你也可以修改成其他网站的音乐和图片
svg图全是去阿里的图标库里找的，你也可以换成其他的
需要引用jQuery
下面是Demo和代码：
Demo直接引用下面三个就好了：
<link rel="stylesheet" href="https://muxmus.com/blog/20220731/bfq.css">
<script src="https://muxmus.com/js/jquery-3.6.0.min.js"></script>
<script src="https://muxmus.com/blog/20220731/bfq.js"></script>
ps：bfq.js文件可能需要引用在末尾，也就是</body>的前面。
下面是带注释讲解的js代码
// JavaScript Document
//如果要引用到别的网站，需要下载svg图标放在相同目录，或者修改svg的地址在前面加上“https://muxmus.com”
//如果你和我一样用的是网易云的歌，那么请注意，需要vip的歌曲只能试听30秒，失效的歌曲会自动跳过
document.write("<div id=\"bfq\" class=\"divb\">");
document.write(" <img id=\"up\" class=\"up1\" alt=\"\" src=\"/img/up.svg\" />");
document.write(" <img id=\"down\" class=\"down1\" alt=\"\" src=\"/img/down.svg\" />");
document.write(" <a id=\"audio\"><img id=\"stop\" alt=\"\" src=\"/img/zt.svg\" /></a>");
document.write(" <div class=\"divn\">");
document.write(" <img id=\"next\" class=\"next1\" alt=\"\" src=\"/img/next.svg\" />");
document.write(" </div>");
document.write(" <audio id=\"music\" preload=\"auto\" onerror=\"onError()\" ></audio>");
document.write("</div>");
document.write("<div class=\"divs\">");
document.write(" <p id=\"songs\" class=\"song1\"></p>");
document.write("</div>");
var song = [
{
title: "title1",
author: "author1",
url: "url1.mp3",
pic: "pic1.jpg"
},
{
title: "title2",
author: "author2",
url: "url2.mp3",
pic: "pic2.jpg"
},
{
title: "title3",
author: "author3",
url: "url3.mp3",
pic: "pic3.jpg"
}
//这里放音乐的信息，title是标题，author是作者，url是音乐链接，pic是专辑图链接
//可无限添加，需用逗号隔开
];
var count = song.length - 1;
//变量count用于储存歌曲总数
var original = new Array;
//变量original用于储存随机打乱的数列，以实现每次的播放顺序都是随机的
var i = 0;
//变量i用于储存播放到第几首
var num = 0;
var flag = 0;
//变量flag用于判断切歌状态
for (var j = 0; j <= count; j++){
original[j] = j;
}
//将变量original变成自然数列012345……
original.sort(function(){
return 0.5 - Math.random();
});
//这里随机打乱了数列，如果要顺序播放，可以删掉上面三行并修改下面四处相同的部分
$(function(){
$("#audio").click(function(){
if(music.paused){
music.play();
$("#stop").attr("src", "/img/bf.svg");
media();
}else{
music.pause();
$("#stop").attr("src", "/img/zt.svg");
}
});
});
//播放or暂停键的点击事件
if(document.all){
window.attachEvent('onload',musicClick);
}
else{
window.addEventListener('load',musicClick,false);
}
//页面加载完后立刻执行musicClick
function musicClick(){
musicPlay();
//页面加载完后调用musicPlay输出歌名歌手名到页面
music.onended = function(){
flag = 0;
nextSong();
music.play();
}
//音乐播完后播放下一首
$("#last").click(function(){
lastSong();
if(music.paused){
$("#stop").attr("src", "/img/bf.svg");
}
music.play();
});
//上一首键的点击事件，虽然我没有写上一首键，因为不知道放在哪合适
$("#next").click(function(){
nextSong();
if(music.paused){
$("#stop").attr("src", "/img/bf.svg");
}
music.play();
});
//下一首键的点击事件
}
function lastSong(){
flag = 1;
i -= 1;
//播放到的首数减一
if(i < 0){
num = original[0];
original.sort(function(){
return 0.5 - Math.random();
});
ifLast();
i = count;
//如果首数小于0，也就是在播放第一首时执行上一首
//那么随机打乱成新的数列，并令首数为最后一首
//如果要顺序播放，该if里只用留最后一行“i = count;”
}
musicPlay();
}
function ifLast(){
if(original[count] == num){
original.sort(function(){
return 0.5 - Math.random();
});
ifLast();
}
}
//检查新的数列中最后一首与上一首是否一样，如果一样则随机打乱数列直到不一样
//以防止连续播放相同的歌曲
//如果需要顺序播放，则删去此ifLast函数
function nextSong(){
flag = 0;
i += 1;
//播放到的首数加一
if(i > count){
num = original[count];
original.sort(function(){
return 0.5 - Math.random();
});
ifNext();
i = 0;
//如果首数小于count，也就是在播放最后一首时执行下一首
//那么随机打乱成新的数列，并令首数为第一首
//如果要顺序播放，该if里只用留最后一行“i = 0;”
}
musicPlay();
}
function ifNext(){
if(original[0] == num){
original.sort(function(){
return 0.5 - Math.random();
});
ifNext();
}
}
//检查新的数列中第一首与上一首是否一样，如果一样则随机打乱数列直到不一样
//以防止连续播放相同的歌曲
//如果需要顺序播放，则删去此ifNext函数
function musicPlay(){
music.src = song[original[i]].url;
document.getElementById("songs").innerHTML = song[original[i]].title + " · " + song[original[i]].author;
//这里输出显示在右下角的歌曲名和歌手名，可自行调整样式
media();
}
//处理音乐链接和页面的歌曲名歌手名，并调用media函数处理mediaSession
function media(){
if ('mediaSession' in navigator){
navigator.mediaSession.metadata = new MediaMetadata({
title: song[original[i]].title,
artist: song[original[i]].author,
artwork: [{src: song[original[i]].pic }],
});
//新建mediaSession
navigator.mediaSession.setActionHandler('play', function(){
music.play();
$("#stop").attr("src", "/img/bf.svg");
});
//在mediaSession中点击暂停时执行
navigator.mediaSession.setActionHandler('pause', function(){
music.pause();
$("#stop").attr("src", "/img/zt.svg");
});
//在mediaSession中点击播放时执行
navigator.mediaSession.setActionHandler('stop', function(){
$("#stop").attr("src", "/img/zt.svg");
});
//在mediaSession中点击关闭执行
navigator.mediaSession.setActionHandler('nexttrack', function(){
nextSong();
if(music.paused){
$("#stop").attr("src", "/img/bf.svg");
}
music.play();
});
//在mediaSession中点击上一首执行
navigator.mediaSession.setActionHandler('previoustrack', function(){
lastSong();
if(music.paused){
$("#stop").attr("src", "/img/bf.svg");
}
music.play();
});
//在mediaSession中点击下一首执行
}
}
function onError(){
if(flag == 0){
nextSong();
$("#stop").attr("src", "/img/bf.svg");
music.play();
}else{
lastSong();
$("#stop").attr("src", "/img/bf.svg");
music.play();
}
}
//如果歌曲失效自动切歌，由变量flag判断上一首还是下一首
$(document).ready(function(){
$('#stop').on('mouseenter',function(){
$('#songs').attr("class", "song2");
$('#up').attr("class", "up2");
$('#down').attr("class", "down2");
$('#next').attr("class", "next2");
});
$('#bfq').on('mouseleave',function(){
$('#songs').attr("class", "song1");
$('#up').attr("class", "up1");
$('#down').attr("class", "down1");
$('#next').attr("class", "next1");
});
});
//当鼠标放在播放器上时，修改页面上的图标
$(function(){
var vol = 0.3;
//这里的0.3是载入时的默认音量，可以从0到1任意调节
$('#music')[0].volume = vol;
$('#up').click(function(){
vol = vol<1?(vol*10+1)/10:1;
$('#music')[0].volume = vol;
});
$('#down').click(function(){
vol = vol>0?(vol*10-1)/10:0;
$('#music')[0].volume = vol;
});
});
//调整音量