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(自动循环播放)不做赘述

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

相关文章
[笔记]音视频学习之SDL篇《十四》简单的动画
[笔记]音视频学习之SDL篇《十四》简单的动画
|
1月前
|
XML 开发工具 Android开发
FFmpeg开发笔记(五十六)使用Media3的Exoplayer播放网络视频
ExoPlayer最初是为了解决Android早期MediaPlayer控件对网络视频兼容性差的问题而推出的。现在,Android官方已将其升级并纳入Jetpack的Media3库,使其成为音视频操作的统一引擎。新版ExoPlayer支持多种协议,解决了设备和系统碎片化问题,可在整个Android生态中一致运行。通过修改`build.gradle`文件、布局文件及Activity代码,并添加必要的权限,即可集成并使用ExoPlayer进行网络视频播放。具体步骤包括引入依赖库、配置播放界面、编写播放逻辑以及添加互联网访问权限。
120 1
FFmpeg开发笔记(五十六)使用Media3的Exoplayer播放网络视频
|
6月前
|
XML 编解码 算法
Android开发音效中录制WAV音频和录制MP3音频的讲解及实战(超详细 附源码)
Android开发音效中录制WAV音频和录制MP3音频的讲解及实战(超详细 附源码)
276 0
|
6月前
|
XML 存储 Java
Android 开发音频录播中媒体录制器MediaRecorder和媒体播放器MediaPlayer的讲解及实战(超详细 附源码)
Android 开发音频录播中媒体录制器MediaRecorder和媒体播放器MediaPlayer的讲解及实战(超详细 附源码)
113 0
[笔记]音视频学习之SDL篇《十三》播放音乐和特效
[笔记]音视频学习之SDL篇《十三》播放音乐和特效
[笔记]音视频学习之SDL篇《八》计时器
[笔记]音视频学习之SDL篇《八》计时器
|
数据采集 编解码 图形学
Unity实现Camera和Audio数据的低延迟RTMP推送技术探讨
关于Unity实现RTMP直播推送技术方案,之前零散的写过几篇介绍,得到了好多开发者的关注。以Android平台为例,目前视频这块,我们demo实现的是Camera数据的采集,然后编码投递到底层,如果设备没有性能瓶颈,可达到高帧率(60帧)均匀的RTMP推送效果。
106 0