HTML5（音视频，canvas画布，画布动画）

音频与视频

HTML5提供了相关标签支持在网页中实现音频与视频的播放。

音频标签

音频标签支持的文件格式有：WAV、MP3、ogg。

音频标签的简单使用方法：

<audio src="../assets/xxxx.mp3" controls></audio>

音频标签的标准使用方法：

<audio controls>
	<source src="xxx.mp3" type="audio/mpeg"/>
    <source src="xxx.wav" type="audio/wav"/>
    <source src="xxx.ogg" type="audio/ogg"/>
    什么破浏览器，换一个吧~
</audio>

audio的常用属性

<audio	controls	是否显示播放器控制面板
       	src=""
       	autoplay    是否在加载完毕后自动播放
       	muted		是否静音
       	loop		是否单曲循环
       	preload="预加载模式"></audio>

preload:

1. none 不预加载
2. metadata 只预加载元数据
3. auto 尽可能的加载音频数据

视频标签

简写方式：

<video src=""		 视频文件的链接路径
       controls
       autoplay
       muted
       loop
       width=""      视频播放器的宽度
       height=""  	 视频播放器的高度
       poster=""	 海报帧图片路径
></video>

音视频相关的DOM操作

我们可以通过Javascript获取音视频的DOM对象。

可以通过访问对象的属性，调用对象的方法来访问音视频播放状态，控制音视频的播放。

<audio id="audio" src="./let.mp3"></audio>
<script>
	let audio = document.getElementById('audio')
    audio.duration   属性  返回时长
    audio.play()     方法  播放视频
</script>

查看DOM相关文档：

https://www.w3school.com.cn/tags/html_ref_audio_video_dom.asp

HTML5 Audio/Video 属性

let audio = document.getElementById('audio')
audio.currentTime
audio.duration

属性	描述
audioTracks	返回表示可用音轨的 AudioTrackList 对象
autoplay	设置或返回是否在加载完成后随即播放音频/视频
buffered	返回表示音频/视频已缓冲部分的 TimeRanges 对象
controller	返回表示音频/视频当前媒体控制器的 MediaController 对象
controls	设置或返回音频/视频是否显示控件（比如播放/暂停等）
crossOrigin	设置或返回音频/视频的 CORS 设置
currentSrc	返回当前音频/视频的 URL
currentTime	设置或返回音频/视频中的当前播放位置（以秒计）
defaultMuted	设置或返回音频/视频默认是否静音
defaultPlaybackRate	设置或返回音频/视频的默认播放速度
duration	返回当前音频/视频的长度（以秒计）
ended	返回音频/视频的播放是否已结束
error	返回表示音频/视频错误状态的 MediaError 对象
loop	设置或返回音频/视频是否应在结束时重新播放
mediaGroup	设置或返回音频/视频所属的组合（用于连接多个音频/视频元素）
muted	设置或返回音频/视频是否静音
networkState	返回音频/视频的当前网络状态
paused	设置或返回音频/视频是否暂停
playbackRate	设置或返回音频/视频播放的速度
played	返回表示音频/视频已播放部分的 TimeRanges 对象
preload	设置或返回音频/视频是否应该在页面加载后进行加载
readyState	返回音频/视频当前的就绪状态
seekable	返回表示音频/视频可寻址部分的 TimeRanges 对象
seeking	返回用户是否正在音频/视频中进行查找
src	设置或返回音频/视频元素的当前来源
startDate	返回表示当前时间偏移的 Date 对象
textTracks	返回表示可用文本轨道的 TextTrackList 对象
videoTracks	返回表示可用视频轨道的 VideoTrackList 对象
volume	设置或返回音频/视频的音量

HTML5 Audio/Video 方法

方法	描述
play()	开始播放音频/视频
pause()	暂停当前播放的音频/视频

HTML5 Audio/Video 事件

audio.addEventListener('abort', function (){
    当音频/视频的加载已放弃时执行
})
audio.addEventListener('play', function(){
    
})
audio.addEventListener('pause', function(){
    
})

事件	描述
abort	当音频/视频的加载已放弃时
canplay	当浏览器可以播放音频/视频时
canplaythrough	当浏览器可在不因缓冲而停顿的情况下进行播放时
durationchange	当音频/视频的时长已更改时
emptied	当目前的播放列表为空时
ended	当目前的播放列表已结束时
error	当在音频/视频加载期间发生错误时
loadeddata	当浏览器已加载音频/视频的当前帧时
loadedmetadata	当浏览器已加载音频/视频的元数据时
loadstart	当浏览器开始查找音频/视频时
pause	当音频/视频已暂停时
play	当音频/视频已开始或不再暂停时
playing	当音频/视频在已因缓冲而暂停或停止后已就绪时
progress	当浏览器正在下载音频/视频时
ratechange	当音频/视频的播放速度已更改时
seeked	当用户已移动/跳跃到音频/视频中的新位置时
seeking	当用户开始移动/跳跃到音频/视频中的新位置时
stalled	当浏览器尝试获取媒体数据，但数据不可用时
suspend	当浏览器刻意不获取媒体数据时
timeupdate	当目前的播放位置已更改时
volumechange	当音量已更改时
waiting	当视频由于需要缓冲下一帧而停止

实现简易音乐播放器

https://neteasecloudmusicapi.vercel.app/#/?id=license

Canvas

canvas意为“画布”。我们可以使用javascript操作画布上的任何一个像素，从而实现在网页中绘制图像。常用于：

1. 网页特效。
2. 网页游戏。
3. 图形图表。

canvas的基本使用

<canvas id="cvs" width="640" height="360"></canvas>

绘制API：

let cvs = document.getElementById('cvs')
let ctx = cvs.getContext('2d')    //  获取绘制Canvas所需要的Context对象
ctx.fillStyle = 'red'  // 设置填充颜色
ctx.fillRect()         // 填充矩形

绘制填充

ctx.fillStyle = 'red'  					// 设置填充颜色
ctx.fillRect(x, y, width, height)       // 填充矩形

绘制描边

ctx.strokeStyle = 'blue'				// 设置描边颜色
ctx.strokeRect(x, y, width, height)		// 针对矩形描边

绘制文本

ctx.font = '24px 微软雅黑'				// 设置字体
ctx.fillText('文本内容', x, y)      	// 填充文字
ctx.strokeText('文本内容', x, y)		// 针对文字描边

Canvas路径

什么是路径？

将一些连续的点按照顺序连接起来所形成的图形称为路径。 路径没有颜色，可以通过API对路径进行描边。若想要填充路径，需要先闭合路径。

绘制路径的基本写法

1. 调用ctx.beginPath()开启一条新路径。
2. 调用ctx.moveTo(x, y)将画笔移动到某一个坐标点。
3. 调用ctx的相关方法（例如ctx.lineTo(x, y) ）绘制路径。
4. 路径绘制完毕后，调用stroke()或fill()来进行描边或填充。

案例：实现一个画板。

移动端针对网页会触发touch相关事件：

1. touchstart 当开始触摸目标元素时触发
2. touchmove 当触摸目标元素并移动时触发
3. touchcancel 当触摸目标元素被打断时触发
4. touchend 当触摸结束时触发

如何实现一个画板？

1. 监听touchstart， 开始触摸canvas时，开启一条新路径。
2. 监听touchmove，当触摸移动时，获取移动到的坐标位置，绘制路径，描边即可。

绘制路径的其他常用API：

绘制矩形路径

ctx.rect(x, y, width, height)   // 仅仅用于绘制透明路径
ctx.stroke()
ctx.fill()

绘制圆弧路径

ctx.beginPath()
// 绘制圆弧  (圆心x, 圆心y, 半径, 起始弧度值, 结束弧度值)
ctx.arc(102, 98, 93, Math.PI*4/3, Math.PI*2)
ctx.lineTo(102, 98)
ctx.fillStyle = 'blue'
ctx.fill()

Canvas动画

动画的本质：每隔很短的一段时间（ 30帧/秒 60帧/秒 ），重新绘制界面从而形成动画。

window.setInterval(function(){
    微调UI的属性信息
    重新绘制UI界面
}, 1000/60)

案例：实现视频播放器的弹幕效果。

1. 修改视频播放器案例，添加发送弹幕、文本框等标签。
2. 在Video标签之上盖一层canvas。
3. 当点击发送弹幕时，将弹幕内容写在canvas的右侧。
4. 实现动画。

动画卡顿的原因：掉帧导致卡顿（不能保证每秒60帧的刷新率）

window.setInterval()天生的缺陷保证不了每秒60帧的刷新率，所以会出现顿顿感。

如果希望实现丝滑的动画，推荐使用window.requestAnimationFrame(callback)方法。

该方法的作用是：请求显示器在刷新下一帧时执行callback。可以借助于这个方法来完成丝滑的动画，基本调用模式如下：

function draw(){
    微调修改ui的属性
    执行耗时操作
    ...
    window.requestAnimationFrame(draw)
}
draw()