AB复读播放器AB复读播放器_复读功能播放器资源-CSDN文库

共3个文件

svg：1个

html：1个

css：1个

需积分: 5 117 浏览量 2024-07-02 15:17:14 上传评论收藏 4KB RAR 举报

资源推荐

资源详情

资源评论

收起资源包目录

播放器.rar （3个子文件）

播放器

index.html 7KB

next.svg 523B

index.css 2KB

<!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>    <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>

评论收藏

内容反馈