HTML5 CSS3实战——自定义音乐播放器（一）_

作者：我家自动化 | 2024-03-16 06:15:36

踩

// 播放器 var Player; Player = { // 歌曲路径 path: 'video/', imgPath:'images/music/', // 歌曲数据 data: null, imgs: null, // 当前播放歌曲的索引 currentIndex: -1, // 播放器元素jquery对象 $audio: $('#audio'), // 歌曲列表 $mList: $('#playlist'), //正在播放的歌曲 $rmusic: $('#rmusic'), $cover: $('#imcover'), // 初始化数据 init: function () { // 数据一般来自服务器端,通过ajax 加载数据,这里是模拟 //歌曲的数据 Player.data = ['GlassySky.mp3', '回梦游仙.mp3', 'unravel.mp3','一直很安静.mp3']; //封面的数据 Player.imgs = ['GlassySky.jpg', '回梦游仙.png', 'unravel.jpg','一直很安静.png']; Player.$rmusic.html(Player.data[Player.currentIndex]); //初始化 var mhtml = ''; var len = Player.data.length; //初始化歌曲列表 for (var i = 0; i < len; i++) { mhtml += '<li value="' + i + '"><a >' + Player.data[i] + '</a></li>'; } Player.$mList.html(mhtml); //初始化专辑封面 Player.$cover.attr("src", Player.imgPath+Player.imgs[0]); }, // 就绪 ready: function () { // 控制 Player.audio = Player.$audio.get(0); Player.$rmusic.html(Player.data[Player.currentIndex]); // 播放 $('#btn-play').click(function () { Player.audio.play(); if (Player.currentIndex == -1) { $('#btn-next').click(); } }); // 暂停 $('#btn-pause').click(function () { Player.audio.pause(); }); // 下一曲 $("#forward").click(function () { if (Player.currentIndex == -1) { Player.currentIndex = 0; } else if (Player.currentIndex == (Player.data.length - 1)) { Player.currentIndex = 0; } else { Player.currentIndex++; } var currentMusic=Player.data[Player.currentIndex]; currentMusic = currentMusic.substring(0,currentMusic.indexOf('.')); console.log("Player.currentIndex : " + Player.currentIndex); Player.audio.src = Player.path + Player.data[Player.currentIndex]; Player.$rmusic.html(currentMusic); Player.$cover.attr("src", Player.imgPath+Player.imgs[Player.currentIndex]); Player.audio.play(); }); // 上一曲 $('#backward').click(function () { if (Player.currentIndex == -1) { Player.currentIndex = 0; } else if (Player.currentIndex == 0) { Player.currentIndex = (Player.data.length - 1); } else { Player.currentIndex--; } var currentMusic=Player.data[Player.currentIndex]; currentMusic = currentMusic.substring(0,currentMusic.indexOf('.')); Player.audio.src = Player.path + Player.data[Player.currentIndex]; Player.$cover.attr("src", Player.imgPath+Player.imgs[Player.currentIndex]); Player.$rmusic.html(currentMusic); Player.audio.play(); }); // 单曲循环 $('#btn-loop').click(function () { console.log("Player.currentIndex :", Player.currentIndex); Player.audio.onended = function () { Player.audio.load(); Player.audio.play(); }; }); // 顺序播放 $('#sequence').click(function () { console.log("Player.currentIndex :", Player.currentIndex); Player.audio.onended = function () { $('#btn-next').click(); }; }); // 随机播放 $('#randoms').click(function () { Player.audio.onended = function () { var i = parseInt((Player.data.length - 1) * Math.random()); alert(i); playByMe(i); }; }); // 播放指定歌曲 function playByMe(i) { i=parseInt(i); Player.audio.src = Player.path + Player.data[i]; Player.audio.play(); Player.currentIndex = i; Player.$rmusic.html(Player.data[Player.currentIndex]); Player.$cover.attr("src", Player.imgPath+Player.imgs[Player.currentIndex]); } // 歌曲被点击 $('#playlist li').click(function () { $(this).find('a').find('i').remove(); $(this).find('a').css("color","#26C5CB"); $(this).find('a').prepend(""); $(this).siblings().find('a').css("color","#ffffff"); $(this).siblings().find('a').find('i').remove(); var i = parseInt($(this).attr('value')); playByMe(i); /*style="color:#26C5CB;"*/ }); }, //循环播放 loop:function(){ Player.audio.onended = function(){ if (Player.currentIndex == -1) { Player.currentIndex = 0; } else if (Player.currentIndex == (Player.data.length - 1)) { Player.currentIndex = 0; } else { Player.currentIndex++; } var currentMusic=Player.data[Player.currentIndex]; currentMusic = currentMusic.substring(0,currentMusic.indexOf('.')); console.log("Player.currentIndex : " + Player.currentIndex); Player.audio.src = Player.path + Player.data[Player.currentIndex]; Player.$cover.attr("src", Player.imgPath+Player.imgs[Player.currentIndex]); Player.$rmusic.html(currentMusic); Player.audio.play(); } } }; Player.init(); Player.ready(); Player.loop(); }); audio.controls = false; audio.addEventListener('timeupdate', function() { updateProgress(); }, false); function togglePlayPause() { if (audio.paused || audio.ended) { playpause.title = "Pause"; playpause.innerHTML = ''; audio.play(); } else { playpause.title = "Play"; playpause.innerHTML = ''; audio.pause(); } } function setVolume() { audio.volume = volume.value; } //更新进度条 function updateProgress() { var percent = Math.floor((100 / audio.duration) * audio.currentTime); progress.value = percent; var canvas = document.getElementById('progress'); var context = canvas.getContext('2d'); var centerX = canvas.width / 2; var centerY = canvas.height / 2; var radius = 150; var circ = Math.PI * 2; var quart = Math.PI / 2; var cpercent = percent / 100; /* current percent */ context.beginPath(); context.arc(centerX, centerY, radius, 0, ((circ) * cpercent), false); context.lineWidth = 10; context.strokeStyle = '#26C5CB'; context.stroke(); if (audio.ended) resetPlayer(); } //重置播放器 function resetPlayer() { audio.currentTime = 0; context.clearRect(0,0,canvas.width,canvas.height); playpause.title = "Play"; playpause.innerHTML = ''; }

由于时间关系，所以歌词列表的动态显示功能还没做。这需要解析歌词的格式。准备在下次完成歌词列表功能。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家自动化/article/detail/247622