<!DOCTYPE html>
<html>
<meta charset="utf-8" />
<head>
<link rel="stylesheet" href="index.css" />
<script type="text/javascript" src="https://libs.baidu.com/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
<div id="card">
<h1>带有AB复读功能的播放器</h1>
<div id="audioContainer">
<audio id="myaudio" src="" controls="controls">您的浏览器不支持 audio 标签。</audio>
<!-- <button onclick="autoPlay()" style="BACKGROUND-IMAGE: url(next.jpg);BACKGROUND-REPEAT: no-repeat;" /> -->
<!-- <input type="image" src="next.svg" onclick="nextPlay()" name="下一曲" /> -->
<!-- <img src="next.svg" alt="" onclick="nextPlay()" /> -->
<img
src="data:image/svg+xml;base64,PHN2ZyB0PSIxNzE2NTI3MzUxNzcyIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIg0KICAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgcC1pZD0iMTQ3MiIgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIj4NCiAgICA8cGF0aCBkPSJNMjAxLjM0NCA4ODEuMDg4Yy0yOC4yMjQgMjEuMDU2LTUxLjI2NCA5LjQ3Mi01MS4yNjQtMjUuNjY0VjE2OC43MDRjMC0zNS4yIDIzLjA0LTQ2Ljc4NCA1MS4yNjQtMjUuNzI4bDQ0Mi45NDQgMzMwLjc1MmMyOC4xNiAyMS4wNTYgMjguMTYgNTUuNTUyIDAgNzYuNjA4bC00NDIuOTQ0IDMzMC43NTJ6TTg3My45ODQgODU1LjM2YzAgMzUuMi0yMi4wOCA2NC00OS4wMjQgNjQtMjcuMDA4IDAtNDkuMDg4LTI4LjgtNDkuMDg4LTY0VjE2OC43MDRjMC0zNS4yIDIyLjA4LTY0IDQ5LjA4OC02NCAyNi45NDQgMCA0OS4wMjQgMjguOCA0OS4wMjQgNjR2Njg2LjY1NnoiIGZpbGw9IiMzMzMzMzMiIHAtaWQ9IjE0NzMiPjwvcGF0aD4NCjwvc3ZnPg==""
alt="" onclick="nextPlay()" />
<input type="button" id="select" value="选择歌曲文件夹" onclick="selectMP3()" />
<button id="loop">单曲循环</button>
</div>
<input type="file" id="files" name="files[]" multiple webkitdirectory style="display: none" accept="audio/mpeg" />
<p><span>播放时间：</span><span id="currentTime"></span></p>
<p>
<span>播放速度：</span>
<select id="playRate" onchange="rate()">
<option value="2">2</option>
<option value="1.5">1.5</option>
<option value="1" selected="selected">1</option>
<option value="0.5">0.5</option>
</select>
</p>
<input type="button" value="开始时间" onclick="startTimefun()" /><span id="start"></span>
<input type="button" value="结束时间" onclick="endTimefun()" /><span id="end"></span>
<input type="button" value="清除复读" onclick="reset()" />
<div>
<ul id="songlist"></ul>
</div>
</div>
<div class="anim" id="cover">
<img src="" alt="" />
</div>
<script language="javascript" type="text/javascript">
var input = document.getElementById("files");
var songlist = document.getElementById("songlist");
var song = songlist.innerHTML;
var myAuto = document.getElementById("myaudio");
myAuto.volume = 0.5; //初始默认音量
var loopbtn = document.querySelector("#loop");
// AB复读代码Start
var startTime = "";
var endTime = "";
//速度调节
function rate() {
var s = document.getElementById("playRate");
myAuto.playbackRate = s[s.selectedIndex].value;
}
function startTimefun() {
startTime = myAuto.currentTime;
$("#start").text(startTime);
}
function endTimefun() {
endTime = myAuto.currentTime;
$("#end").text(endTime);
}
function reset() {
startTime = "";
endTime = "";
$("#start").text(startTime);
$("#end").text(endTime);
}
myAuto.ontimeupdate = function () {
$("#playbackRate").text(myAuto.playbackRate); //显示播放时间
$("#currentTime").text(myAuto.currentTime); //显示播放速度
if (startTime != "" && endTime != "") {
if (parseInt(myAuto.currentTime) >= endTime) {
myAuto.currentTime = startTime;
}
}
};
// AB复读代码End
input.onchange = function (e) {
var files = e.target.files; // FileList
var count = 0;
for (var i = 0, f; (f = files[i]); ++i) {
//file have .name
var path = f.name || f.webkitRelativePath;
if (/\.(mp3|wav|aac|flac|ogg|m4a)$/i.test(path)) {
var url;
// if (window.createObjectURL) {
// url = window.createObjectURL(files[i]);
// } else if (window.createBlobURL) {
// url = window.createBlobURL(files[i]);
// } else if (window.URL && window.URL.createObjectURL) {
// url = window.URL.createObjectURL(files[i]);
// } else if (window.webkitURL && window.webkitURL.createObjectURL) {
// url = window.webkitURL.createObjectURL(files[i]);
// }
url = window.URL.createObjectURL(files[i]);
if (count % 2 === 0) {
song += '<li class="song odd" onclick="changeSrc(event)" ><input type="hidden" value="' + url + '"/>' + path + "</li>";
} else {
song += '<li class="song even" onclick="changeSrc(event)" ><input type="hidden" value="' + url + '"/>' + path + "</li>";
}
count++;
} else {
if (path === "folder.jpg") {
var url = window.URL.createObjectURL(files[i]);
const img = document.querySelector("#cover img");
img.src = url;
console.log(path, files[i]);
}
}
}
songlist.innerHTML = song;
};
myAuto.addEventListener("ended", function () {
nextPlay();
});
function nextPlay() {
var next = $(".cur").next();
next.addClass("cur").siblings().removeClass("cur");
var cur = document.getElementsByClassName("cur");
myAuto.src = cur[0].firstChild.value;
myAuto.play();
}
function selectMP3() {
console.log(song);
input.click();
}
function changeSrc(event) {
event = event ? event : window.event;
var obj = event.srcElement ? event.srcElement : event.target;
$(obj).addClass("cur").siblings().removeClass("cur");
myAuto.src = obj.firstChild.value;
myAuto.play();
}
loopbtn.addEventListener("click", function () {
if (myAuto.hasAttribute("loop")) {
myAuto.removeAttribute("loop");
loopbtn.classList.remove("loop");
} else {
myAuto.setAttribute("loop", "");
loopbtn.classList.add("loop");
}
});
myAuto.addEventListener("play", function () {
const img = document.querySelector("#cover");
// img.classList.add("anim");
img.style.animationPlayState = 'running';
console.log("The audio started to play");
});
myAuto.addEventListener("pause", function () {
const img = document.querySelector("#cover");
img.style.animationPlayState = 'paused';
// img.classList.remove("anim");
});
</script>
</body>
</html>
