html5 Audio音乐播放器(canvas圆形音乐播放进度条)
主要用到的是 audio 和canvas,我们下来介绍下着来年哥哥标签以及它们的api:
- audio
属性 | 属性值 | 注释 |
---|---|---|
src | url | 播放音乐的url地址 |
preload | load/auto | 预加载 |
loop | loop | 循环播放 |
controls | controls | 是否显示默认的控制按钮 |
autoplay | autoplay | 自动播放 |
各大浏览器对音乐格式的支持情况
音频格式 | Chrome Firefox | IE9 Opera | Safari |
---|---|---|---|
OGG | 支持 | 支持 | 支持 |
MP3 | 支持 | 不支持 | 支持 |
WAV | 不支持 | 支持 | 不支持 |
属性
属性 | Chrome Firefox |
---|---|
duration | 获取媒体文件的总时长,以秒(S)为单位,如果无法获取返回NaN |
paused | 如果媒体文件被暂停,那么paused属性返回true,反之false |
ended | 如果媒体文件播放完毕返回true |
muted | 用来获取是否为静音状态,值为bool |
volume | 控制音量的属性,值为0-1;0 为最小,1为最大 |
startTime | 返回起始的播放时间 |
error | 返回错误的代码,额uull的时候为正常,否则可以通过Music.error.code来获取具体繁荣错误代码: |
currentTime | 用来获取或者控制当前的播放时间,单位是秒(S) |
currentSrc | 以字符串的形式返回正在播放或者已经加载的文件 |
函数 | 作用 |
---|---|
load() | 加载音频,视频 |
play() | 播放 |
pause() | 暂停播放 |
canPlayType() | 测试是否支持给定类型文件 |
常用的事件
事件名称 | 事件作用 |
---|---|
loadstart | 客户端开始请求数据 |
progress | 客户端正在请求数据,缓冲 |
play | |
pause | |
ended | |
timeupdate | 当前播放时间发生改变的时候 |
canplaythrough | 歌曲已经载入完全 |
canplay | 缓冲至目前可播放的状态 |
2.canvas
方法 | 描述 |
---|---|
fill() | 填充当前绘图(路径) |
stroke() | 绘制已定义的路径 |
beginPath() | 起始一条路径,或重置当前路径 |
moveTo() | 把路径移动到画布中的指定点,不创建线条 |
closePath() | 创建从当前点回到起始点的路径 |
lineTo() | 添加一个新点,创建从该点到最后指定点的线条 |
clip() | 从原始画布剪切任意形状和尺寸的区域 |
quadraticCurveTo() 创建二次贝塞尔曲线 | |
bezierCurveTo() 创建三次方贝塞尔曲线 | |
arc() | 创建弧/曲线(用于创建圆形或部分圆) |
translate | 重新定义坐标系 |
3 创建一个audio标签 和canvas标签,如下:
<audio id="music" src="wuding.mp3" controls="controls" preload="auto">
Your browser does not support the audio element.
</audio>
<canvas id="canvas"></canvas>
4 用js控制canvas画圆
var music = document.getElementById('music');
//绑定timeupdate事件
music.addEventListener('timeupdate',function(){
if (!isNaN(music.duration)) {
var progressValue = music.currentTime/music.duration; //用时间比来获取进度条的值
if(progressValue == 1){
progressValue=0;//当播放完成,进度条跳到开始
}
drawCircle(canvas,progressValue);
};
},false);
drawCircle = function (canvas, percentage) {
var clientWidth = document.documentElement.clientWidth;
var canvasWidth = Math.floor(clientWidth * 200 / 750);
var innerR = canvasWidth * 0.8 * 0.5;//半径
var ctx;
canvas.setAttribute('width', canvasWidth + 'px');
canvas.setAttribute('height', canvasWidth + 'px');
if (canvas.getContext) {
ctx = canvas.getContext('2d');
}
ctx.translate(canvasWidth / 2, canvasWidth / 2);
ctx.beginPath();
ctx.arc(0, 0, innerR, 0, Math.PI * 2, false);
ctx.lineWidth = 10;
ctx.strokeStyle = "#F0F0F0";
ctx.stroke();
ctx.beginPath();
ctx.arc(0, 0, innerR, Math.PI * 3 / 2, (Math.PI * 3 / 2 + Math.PI * 2 / 180 + percentage * Math.PI * 2), false);
ctx.lineWidth = 10;
ctx.strokeStyle = "#EEBD44";
ctx.stroke();
};
drawCircle(document.getElementById('canvas'),0);
5 效果图如下:
6 扩展,可以不需要自带的默认播放控件,自己设计按钮 或图片的形式 来控制 音乐播放
7 问题:对于移动端页面 要适配各种手机屏,对于手机适配的问题 我们经常用rem单位 来处理,但是canvas 不支持rem ,所以需要用js 获取到客户端的手机屏宽度 进行转化,具体怎么做,下次再讲!