超简约的音乐播放器

一款超简约的音乐播放器，支持调用服务器本地的LRC歌词，整体播放器的界面相当的简约，因为是简约版，所以暂没有加入歌曲列表等功能，喜欢的童鞋请收下吧。

分类：html/css > 按钮难易：初级

查看演示下载资源下载积分： 20 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

页面的head部分，简单设置页面元素样式即可，代码如下：

<style type="text/css">
.container{
    width: 100%;
    text-align: center;
    margin-top: 38%;
}
#aaa{
    width: 30px;
    height: 30px;
    overflow: hidden;
}
</style>

页面的body部分，一个div容器里放如audio和canvas标签，代码如下：

<div class="container">
    <audio controls src="http://so1.111ttt.com:8282/2014/1/12m/24/5242317486.m4a?tflag=1497348780&pin=d7f4921c7c7a686404d86969d84cb475&ip=117.94.187.7#.mp3" autoplay></audio>
    <canvas id="aaa" width="30" height="30"></canvas>
</div>

页面的底部，需引入jQuery库和k-audio.js插件，并启用播放器插件，接着绘制播放器里的音量调节图标，代码如下：

<script src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/k-audio.js"></script>
<script>kac(document.getElementsByTagName("audio")[0],"320px","mp3/光るなら.lrc");</script>
<script type="text/javascript">
    var aaa=document.getElementById("aaa");
    var ctx=aaa.getContext("2d");
    ctx.beginPath();
    ctx.moveTo(10,7.5);
    ctx.lineTo(10,22.5);
    ctx.lineTo(22.5,15);
    ctx.lineTo(10,7.5);
    ctx.moveTo(10,7.5);
    ctx.strokeStyle = "#fff";
    ctx.lineWidth = 1.0;
    ctx.stroke();
    ctx.fillStyle = '#fff';
    ctx.fill();
    ctx.closePath();
    ctx.beginPath();
    ctx.arc(15,15,14,0,Math.PI*2,true);
    ctx.lineWidth = 1.0;
    ctx.strokeStyle = "#fff";
    ctx.stroke();
    ctx.closePath()
</script>