H5学习之路之audio音频播放

简介: H5学习之路之audio音频播放

为什么突然写这个呢?很简单,H5学习本身应该是一个系统的学习过程,虽然很多的东西都是会的,但是没有总结过,也不知道自己究竟对H5了解多少,爱有多深,所以在这里装作自己好像对H5很了解的样子,写一个记录性质的博文。进行一次系统的总结和学习。

今天学习的是audio音频播放的属性

我们都知道,其实在H5之前是没有只在网页上播放音频的标准的,之前大多数的解决办法是运用Flash,甚至是一直用来很长的一段时间,直到H5的出现,基本上定了网页播放音频的标准-audio

支持的格式:Ogg、MP3、Wav

对网页的支持情况是这样的:

(摘自W3cshool)

具体怎么使用呢?

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
  </head>
  <body>
    <audio src="music/胡夏 - 同桌的你.mp3" controls="controls" loop="loop" autoplay="autoplay"></audio>
  </body>
</html>

这里我用了三个属性:controls、loop、autoplay

我分别说一下:

controls(控制插件)使用的话就是需要显示插件,不使用的话不显示,效果是这样的:

那就有人说了,不显示我怎么播放呢?也是可以的,如果您不写这个显示插件的属性,可以设置我下面要说的属性

autoplay(加载页面播放)不管有没有显示播放的按钮,只要设置这个属性,进入页面就会播放

loop(自动循环播放)不做赘述

这三个属性的默认值都是它本身。

相关文章
|
7月前
[笔记]音视频学习之SDL篇《十四》简单的动画
[笔记]音视频学习之SDL篇《十四》简单的动画
|
5月前
|
小程序 JavaScript 开发工具
Uniapp 对接抖音短剧播放器 video-player 坑点解决
Uniapp 对接抖音短剧播放器 video-player 坑点解决
189 1
|
5月前
|
XML 编解码 算法
Android开发音效中录制WAV音频和录制MP3音频的讲解及实战(超详细 附源码)
Android开发音效中录制WAV音频和录制MP3音频的讲解及实战(超详细 附源码)
86 0
|
5月前
|
XML 存储 Java
Android 开发音频录播中媒体录制器MediaRecorder和媒体播放器MediaPlayer的讲解及实战(超详细 附源码)
Android 开发音频录播中媒体录制器MediaRecorder和媒体播放器MediaPlayer的讲解及实战(超详细 附源码)
46 0
|
7月前
[笔记]音视频学习之SDL篇《十三》播放音乐和特效
[笔记]音视频学习之SDL篇《十三》播放音乐和特效
|
7月前
[笔记]音视频学习之SDL篇《一》 渲染图片
[笔记]音视频学习之SDL篇《一》 渲染图片
|
7月前
[笔记]音视频学习之SDL篇《八》计时器
[笔记]音视频学习之SDL篇《八》计时器