audio 组件可以在小程序页面上添加音频 .. 用一个 audio .. poster 属性设置的是音频的海报 .. 设置一个图像的地址 .. https://resources.ninghao.net/deng-deng-deng-1x1.jpg

src 属性的值是音频文件的地址 .. https://resources.ninghao.net/deng-deng-deng.mp3

然后可以再添加一个 author 属性设置一下音频的作者 ... 再用一个 name 属性，设置一下音频的名字 .. 再添加一个 controls .. 显示控制音频播放的东西 ..

现在页面上会显示一个音频 .. 点一下播放 ... 可以播放这个音频 ..

事件

有几个常用的事件，可以绑在 audio 组件上 .. 先用一个 bindplay .. 播放音频的时候会执行它 .. 用一下 play .. 再添加一个 bindpause .. 事件处理用 pause .. 暂停的时候会用它 .. bindended ，结束播放的时候执行一下 ended ..

再到页面的主逻辑里面添加这几个事件处理 .. 一个 play .. 把事件对象交给它 .. 然后在控制台上输出 event 对象 ..

再添加一个 pause .. 同样在控制台上输出事件对象 .. 还有一个 ended ..

到开发者工具再去预览一下 .. 播放 .. 触发 paly ... 暂停 .. 触发 pause 事件 .. 你会看到事件的 type 是 pause ..

结束播放以后，会触发 ended 事件...

视频

添加视频用的是 video 组件 .. 添加一个 video .. 它的 poster 属性设置的就是视频的封面图像 ..

src 属性的值是视频的地址 ..

现在，页面上现在会显示一个视频 ..

video 的 objectFit 属性可以设置内容的填充方式 .. 比如我们把它设置成 cover ..

这样视频内容会保持自己的比例，填满视频容器 ..

图像

要显示图像，可以使用 image 组件 .. 添加一个 image .. 图像的地址可以放在 src 属性里面 .. 页面上会显示一张图片 ..

我们可以把之前为 image 添加的样式去掉 ...

你会发现，现在这个图像的显示比例有点问题 .. 这是因为图像容器的比例与图像比较不一致 .. 我们先在 image 组件上面用一个 style .. 添加点样式 .. 设置一下背景颜色 ..

然后再添加一个 mode 属性 .. 先把它设置成 aspectFit .. 图像会保持它的比例，并且会缩放显示 .. 注意它的上面还有下边露出来的灰色部分其实就是图像容器的多余部分 ..

再把这个图像的宽度设置成 100vw ...

让图像保持自己的比例，并且占满整个图像容器显示 .. 可以把 mode 设置成 aspectFill ..