html5中audio的详细使用

2023-05-16

html5的audio功能上已经非常强大,回放,跳转,缓冲等以前只能用flash才能实现的功能,html5的audio都能轻松搞定

最近的一个项目使用到了这个功能,把我使用的情况写下来,供大家参考, 因为我需要的功能很简单,所以做的不复杂,如果要使用更多的功能,可以参考下面的api,能实现很多高大上的功能

audio 相关的 api

<audio src=”音频的地址”>备用(当浏览器不支持audio时显示的内容)</audio>

控制函数功能说明

  • load()   加载音频、视频软件,通常不必调用,除非是动态生成的元素,用来在播放前预加载
  • play()    加载并播放音频、视频文件,除非文件已经暂停在其他位置,否则默认重头开始播放
  • pause() 暂停处于播放状态的音频、视频文件

audio 的只读媒体特性有:

只读属性属性说明

  • duration   获取媒体文件的播放时长,以s为单位,如果无法获取,则为NaN
  • paused     如果媒体文件被暂停,则返回true,否则返回false
  • ended       如果媒体文件播放完毕,则返回true
  • startTime  返回起始播放时间,一般是0.0,除非是缓冲过的媒体文件,并一部分内容已经不在缓冲区
  • error          在发生了错误后返回的错误代码
  • currentSrc  以字符串形式返回正在播放或已加载的文件,对应于浏览器在source元素中选择的文件

 

audio 可脚本控制的特性值:

  • autoplay       自动播放已经加载的的媒体文件,或查询是否已设置为autoplay
  • loop              将媒体文件设置为循环播放,或查询是否已设置为loop
  • currentTime 以s为单位返回从开始播放到目前所花的时间,也可设置currentTime的值来跳转到特定位置
  • controls        显示或者隐藏用户控制界面
  • volume         在0.0到1.0间设置音量值,或查询当前音量值
  • muted           设置是否静音
  • autobuffer     媒体文件播放前是否进行缓冲加载,如果设置了autoplay,则忽略此特性

对于这些属性,主流的浏览器都支持。可是别以为就没有了兼容性,在音频播放流中,有两个阵营。firefox 和 opera 支持 ogg 音频,safari 和 ie 支持 mp3.幸好Google的chrome都支持。


<div id="audioControl">
	<div class="play">
		<span id="play">Play</span>
	</div>
</div>

<audio id="media" src="test.mp3"></audio>

var media = $('#media')[0];
var audioTimer = null;

//绑定播放暂停控制
$('.play').bind('click', function() {
    playAudio();
}); 

//播放暂停切换
function playAudio() {
    if(media.paused) {
        play();
    } else {
        pause();
    }
}

//播放
function play() {
    media.play();
    $('#play').html('Pause');
}

//暂停
function pause() {
    media.pause();
    $('#play').html('Play');
}





  


本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

html5中audio的详细使用 的相关文章

  • 跟踪 HTML5 音频元素的播放次数?

    跟踪 HTML5 音频元素播放次数的最佳方法是什么 我们也可以使用 Google Analytics 如果这是最好的方法 HTML5 音频元素有基本的回调 https developer mozilla org En Using audio
  • Python 声音(“铃声”)

    我想让一个 python 程序在完成任务时通过发出嘟嘟声来提醒我 目前 我使用import os然后使用命令行语音程序说 进程完成 我更愿意它是一个简单的 铃 我知道有一个函数可以用于Cocoa apps NSBeep 但我认为这与此没有太
  • 当我的应用程序最小化时,在 Android 中使用 Youtube API 播放音乐视频中的音频

    我正在开发一个使用 Youtube API 的应用程序 因为我主要集中于MUSIC VIDEOS 来自 Youtube 当我离开应用程序时 我需要在后台播放视频的音频 但每次我导航到另一个应用程序时 视频都会暂停 我该怎么做才能解决这个问题
  • 如何在电话铃声、收到短信等时暂停音乐?

    我正在尝试检测 Android 声音并在它们发出噪音时暂停我的应用程序的音乐 暂时或永久 这段代码似乎什么也没做 stop暂停音乐并p写入日志 它永远不会被调用 public class PollyPrissyPants extends A
  • 如何在C#中剪切、编辑和合并OGG文件?

    我有一个 ogg vorbis 文件 我必须用它执行两个操作 将文件的一部分从一个位置剪切到另一个位置 将另一个文件与现有文件合并 如何在 C 中执行这两个操作 你可以使用 libzplay 来做到这一点http libzplay sour
  • FFMPEG Seeking 带来音频伪影

    我正在使用 ffmpeg 实现音频解码器 在读取音频甚至搜索已经可以工作时 我无法找到一种在搜索后清除缓冲区的方法 因此当应用程序在搜索后立即开始读取音频时 我没有任何工件 avcodec flush buffers似乎对内部缓冲区没有任何
  • 如何使用 iPhone SDK 加快或减慢背景音乐曲目的速度?

    是否有一种简单的方法来控制使用音频队列服务播放的声音文件循环的播放速度 节奏 例如 如果游戏正在播放背景音乐 我想让BGM随着时间的流逝而加快 但不改变音乐的音调 谢谢 据我所知 没有什么简单的方法可以做到这一点 在 Mac 上 您可能会使
  • 如何在不使用 Cocos2D 的情况下将声音实现到现有应用程序中

    例如 iOS SDK下载页面上有示例代码 我正在使用计算器应用程序 iPhoneUnitTests 我想知道是否可以轻松地向已构建的应用程序上的按钮添加声音 播放短声音 例如按钮声音 实际上非常简单 这是一个简单的例子 您必须链接 Audi
  • 在 Android 媒体播放器上播放 MediaStore 中的音频

    有没有办法通过使用 MediaPLayer 播放从 MediaStore 获得的音频 或者我走的方向完全错误 到目前为止 我已经查看了 MediaStore Audio 但没有什么能真正帮助我 我只需要知道我是否走在正确的轨道上 首先 我假
  • ffmpeg 命令行,用于使用 Windows 7 从 Decklink 卡捕获(和录制)720p 音频和视频

    我正在尝试使用 Windows 7 720p 从 blackmagic Decklink 捕获卡捕获音频和视频 但我似乎无法正确获取 ffmpeg 命令行设置 ffmpeg list devices true f dshow i 虚拟 ds
  • Python 中的二进制相移键控

    我目前正在编写一些代码 以使用音频转换通过激光传输消息 文件 和其他数据 我当前的代码使用 python 中 binascii 模块中的 hexlify 函数将数据转换为二进制 然后为 1 发出一个音调 为 0 发出不同的音调 这在理论上是
  • pygame.error:此编解码器不支持 set_pos

    我的 python 音频播放器有问题 我使用此功能来暂停正在播放的音乐 def pause event global time pygame mixer music pause time pygame mixer music get pos
  • 使用 python 检测给定音频文件中的静音索引

    我正在尝试使用 numpy struct 等各种模块在 python 中处理音频文件 但是我真的很难检测文件中的静音 就像在哪里存在静音一样 我遇到的方法之一是在音频信号上滑动固定时间间隔的窗口并记录元素平方和 我是Python新手 几乎不
  • 如何在声音输入时触发振动?

    我正在尝试创建一个 Android 应用程序 在其中过滤蜂鸣声的一个特定频率并使手机振动 我正在从移动设备的 MIC 获取输入并使用 MediaRecorder 类 通过使用该类 我可以录制 保存和播放输入 现在我需要我的手机在发出蜂鸣声
  • 将音频从 PC 传输到智能手机?

    2016 年圣诞节 我和我爸爸想用灯光和灯光为我们的社区举办一场灯光秀music We have the lights set up but the music is a problem We don t want to put huge
  • 在 Raspberry Pi 4 上的多个输出设备上播放多个 mp3 文件

    我需要 4 8 个同时播放立体声音频音乐频道 连续播放 SD 卡上特定文件夹中的 mp3 音乐 Working 板载 3 5 音频插孔 USB声卡正常播放音乐 Problem 但一旦我尝试在树莓派上使用带有 USB 声卡的第三个音频输出 其
  • 从相机录制视频、叠加位图、添加音频、保存到设备,所有这些都在 as3/AIR mobile 中进行

    我的任务是在移动设备上录制来自摄像头的实时视频流 然后覆盖随时间变化的位图 并将音频 mp3 轨道添加到视频文件中 然后将其保存到设备上的某个位置 例如相机胶卷 我看到了一些有用的帖子 主要是这个 AS3 Flash AIR 使用网络摄像头
  • 如何在Python中获取声音级别?

    对于我正在进行的项目 我需要获取麦克风的实时分贝级别 我见过阴谋家 Print out realtime audio volume as ascii bars import sounddevice as sd import numpy as
  • 如何在Android中使用AudioRecorder录制音频

    我想从 Android 设备捕获音频 我下面的代码似乎成功地制作了一个wavSD卡上有文件但无法播放 我尝试使用不同的媒体播放器来播放它 但没有成功 我的代码中有一个问题导致了这个问题 code public class MainActiv
  • Android MediaExtractor seek() 对 MP3 音频文件的准确性

    我在使用 Android 时无法在eek 上获得合理的准确度MediaExtractor 对于某些文件 例如this one http www archive org download emma solo librivox emma 01

随机推荐

  • spring如何获取bean的6种方法,你知道几个?

    spring获取bean的6种方法 Bean工厂 xff08 com springframework beans factory BeanFactory xff09 是Spring框架最核心的接口 xff0c 它提供了高级IoC的配置机制
  • c语言中while与do while循环的主要区别是什么

    while循环与do while循环的区别如下 xff1a 1 循环结构的表达式不同 while循环结构的表达式为 xff1a while xff08 表达式 xff09 循环体 xff1b do while循环结构的表达式为 xff1a
  • MVC设计模式

    MVC的全名是Model View Controller xff0c 是模型 Model xff0d 视图 view xff0d 控制器 controller 的缩写 xff0c 是一种设计模式 它是用一种业务逻辑 数据与界面显示分离的方法
  • MVC 模式及其优缺点

    一 MVC 原理 MVC 是一种程序开发设计模式 它实现了显示模块与功能模块的分离 提高了程序的可维 护性 可移植性 可扩展性与可重用性 xff0c 降低了程序的开发难度 它主要分模型 视图 控制器三层 1 模型 model 它是应用程序的
  • MVC 模式及其优缺点

    一 MVC 原理 MVC 是一种程序开发设计模式 它实现了显示模块与功能模块的分离 提高了程序的可维 护性 可移植性 可扩展性与可重用性 xff0c 降低了程序的开发难度 它主要分模型 视图 控制器三层 1 模型 model 它是应用程序的
  • MyBatis生命周期2的过程(最终)?

    首先加载mybatis config xml总配置文件 xff0c 根据development的参数配置连接数据库 xff1b 查询mappers映射关系 xff0c 找到mapper xml配置文件 执行mapper xml文件 xff0
  • spring boot使用redis做数据缓存

    1 添加redis支持 在pom xml中添加 1 lt dependency gt 2 lt groupId gt org springframework boot lt groupId gt 3 lt artifactId gt spr
  • Springboot配置支持Redis实例

    思路 xff1a 既然使用redis就要添加redis依赖 xff0c redis是 lt key value gt 的存储方式 xff0c 支持字符串存储 有了jar包 xff0c 就要把我们的数据存进去 xff0c 读出来 redis不
  • 【深度学习】显卡驱动, cuda, cudnn的关系与版本对应问题

    转载自 xff1a https blog csdn net weixin 39673002 article details 113053729 仅作学习记录 文章目录 显卡驱动cuda与cudnncudnncuda 建议 这四者从底层 xf
  • Spring Boot使用redis做数据缓存

    1 添加redis支持 在pom xml中添加 lt dependency gt lt groupId gt org springframework boot lt groupId gt lt artifactId gt spring bo
  • 发现三本不错的讲解数据存储的书

    研究数据存储 xff0c 没有很多现成的东西 xff0c 但是可以参考数据库系统的存储实现的内容 xff0c 发现三本书 xff0c 觉得值得一读 数据库系统全书 http www china pub com computers commo
  • JAVA发送json格式http请求(POST,GET)

    代码如下 xff1a HttpRequest java文件 package httptest import java io BufferedReader import java io IOException import java io I
  • Ubuntu Server xfce4桌面、Xrdp远程桌面安装:深度学习环境搭建(二)

    实验室服务器要求多个人能够连接远程桌面 xff0c 方面操作 所以安装远程桌面 xff0c 以及服务d Ubuntu Server本身不带桌面 xff0c 并且实验室的服务器要求所有人都能使用远程桌面 xff0c 为了方便操作 1 更新信息
  • 再见2011,你好,2012。

    不会写文章 xff0c 这个算是对自己的一个总结吧 xff0c 毕业一年半了 xff0c 从事嵌入式也有一年半了 xff0c 总觉得自己连入门都谈不上 xff0c 整天都看上去很忙 xff0c 有时候确实有一大堆的事情要做 xff0c 但是
  • 学习TensorFlow,浅析MNIST的python代码

    在github上 xff0c tensorflow的star是22798 xff0c caffe是10006 xff0c torch是4500 xff0c theano是3661 作为小码农的我 xff0c 最近一直在学习tensorflo
  • mps430和51单片机的区别及优点

    1 MSP430系列单片机是美国德州仪器 xff08 TI xff09 1996年开始推向市场的一种16 位超低功耗的混合信号处理器 xff08 Mixed Signal Processor xff09 称之为混合信号处理器 xff0c 主
  • firewalld添加端口

    CentOS7默认的防火墙是firewalld 如果没有firewalld防火墙 xff0c 可以执行yum install firewalld 命令进行安装 2 0firewalld防火墙启用与关闭 启动systemctl start f
  • pycharm中安装PyCrypto提示需要安装VC++14.0问题解决

    1 安装VC14 0 2 升级pip 3 权限不够 很麻烦 xff0c 没试过 替代方案 xff1a pip install pycryptodome 但是导入模块不好使 报错 No module named Crypto 去python的
  • waiting for X server to shut down Server terminated successfully(0) ,closing log file

    CentOS6 5中在虚拟机有文本界面安装图形化界面 startx或者init 5出现如标题所述错误 xff0c 解决方法 xff1a yum groupinstall X Window System yum groupinstall De
  • html5中audio的详细使用

    html5的audio功能上已经非常强大 xff0c 回放 xff0c 跳转 xff0c 缓冲等以前只能用flash才能实现的功能 xff0c html5的audio都能轻松搞定 最近的一个项目使用到了这个功能 xff0c 把我使用的情况写