HTML5使用JavaScript控制<audio>音频的播放

1,下面是一个播放音乐的最简单样例

(controls属性告诉浏览器要有基本播放控件)
原文:HTML5 - 使用<audio>播放音频

<audio src="hangge.mp3" controls></audio>

2,预加载媒体文件

设置preload不同的属性值,可以告诉浏览器应该怎样加载一个媒体文件:
(1)值为auto:让浏览器自动下载整个文件
(2)值为none:让浏览器不必预先下载文件
(3)值为metadata:让浏览器先获取音频文件开头的数据块,从而足以确定一些基本信息(比如音频的总时长)

<!-- 用户点击播放才开始下载 -->
<audio src="hangge.mp3" controls preload="none"></audio>

3,自动播放

使用autoplay属性可以让浏览器加载完音频文件后立即播放。(如果想用来作为背景音乐的话可以把controls属性去掉)

<audio src="hangge.mp3" controls autoplay></audio>

4,循环播放

使用loop属性让音乐播放结束时,在从头开始播放。

<audio src="hangge.mp3" controls loop></audio>

 

 

有时我们需要使用js来控制播放器实现音乐的播放,暂停。或者使用js播放一些音效。

1,通过JavaScript控制页面上的播放器

比如把页面上添加一个<audio>用来播放背景音乐(由于controls属性未设置,我们是看不见播放界面的)

<audio id="bgMusic">
    <source = src="hangge.mp3" type="audio/mp3">
    <source = src="hangge.ogg" type="audio/ogg">
</audio>

通过pause()和play()方法可以使音乐暂停和继续播放(结合currentTime属性可以实现停止和重新播放)

var audio = document.getElementById("bgMusic");
 
//播放(继续播放)
audio.play();
 
//暂停
audio.pause();
 
//停止
audio.pause();
audio.currentTime = 0;
 
//重新播放
audio.currentTime = 0;
audio.play();

2,也可以动态的创建<audio>元素

//方式1
var audio = document.createElement("audio");
audio.src = "hangge.mp3";
audio.play();
 
//方式2
var audio = new Audio("hangge.mp3");
audio.play();

通过canPlayType()方法可以判断浏览器支持的编码方式,从而设置对应的音频文件。

if (audio.canPlayType("audio/mp3")) {
    audio.src = "hangge.mp3";
}else if(audio.canPlayType("audio/ogg")) {
    audio.src = "hangge.ogg";
}

 

 

时间: 2024-07-28 16:10:09

HTML5使用JavaScript控制<audio>音频的播放的相关文章

ios-HTML5 Audio多音频同时播放延迟问题

问题描述 HTML5 Audio多音频同时播放延迟问题 平台:安卓.IOS 开发语言:HTML5 问题描述:多个音频同时播放出现6~16ms左右的延迟,希望能缩到2ms内 问题代码: function play( url1,url2,url3,url4,url5,url6,url7 ){ p = plus.audio.createPlayer(url1); p1 = plus.audio.createPlayer(url2); p2 = plus.audio.createPlayer(url3)

用 JavaScript 控制 Flash 播放器的方法汇总

javascript|控制 说明:含例句的方法我已作了测试. 播放动画:Play() 例:(网页中的 Flash id).Play(); 停止动画:StopPlay() 动画是否正在播放:IsPlaying() 跳转到某帧:GotoFrame(frame_number) 获取动画总帧数:TotalFrames() 回传当前动画所在帧数:CurrentFrame() 使动画返回第一帧:Rewind() 放大指定区域:SetZoomRect(left,top,right,buttom) 改变动画大小

用触发器在PowerPoint控制音频的播放

6.6.1 操作前准备步骤1: 在需要插入音频的那张幻灯片中单击"插入"菜单,在其下拉菜单中,选中"影片和声音"命令,在其下一级菜单中选中"文件中的声音"选项,如图6-30所示: 图 6-30 在 "插入声音"对话框找到你要插入的音频文件,选中,单击"确定"命令, 图 6-31 "插入声音"对话框 步骤2: 导入音频文件后,打开"Microsoft Office PoerPoi

浅谈javascript控制HTML5的全屏操控,浏览器兼容的问题_javascript技巧

如果你想使一个元素在全屏模式下展现 (比如说 <video>),你可以调用该元素的 requestFullscreen() 方法:这个方法在 Gecko 中的实现是 element.mozRequestFullScreen(),在 WebKit 中为 element.webkitRequestFullscreen(). 比如一个实例: var elem = document.getElementById("myvideo"); if (elem.requestFullscr

javascript控制realplayer对象使用_网页播放器

复制代码 代码如下: <object ID="javademo" CLASSID="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" HEIGHT="280" WIDTH="200">  <param name="AUTOSTART" value="0">  <param name="SHUFFLE"

javascript控制图片播放的实现代码_javascript技巧

一般实现用鼠标控制图片的滚动效果都比较麻烦,大段大段的代码让新手头疼无从下手,下面我来写个简单的javascript控制图片滚动的效果.代码简洁明了,兼容ie.firefox和google浏览器. 分享代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

《Windows 8 开发权威指南:HTML5 和JavaScript卷》——2.2 JavaScript概述

2.2 JavaScript概述 2.2.1 什么是JavaScript 1.什么是脚本语言 脚本语言是一种应用程序扩展语言,用于系统的扩展,使其按用户的意愿去运行. 所有的基础功能由系统提供,脚本语言在更高一层次描述如何调用系统接口. 解释执行. 2.脚本语言的分类 嵌入式. 非嵌入式. 3.什么是JavaScript 一种计算机程序设计语言. 脚本语言. 解释语言:程序语言代码→语言翻译程序→机器代码. 可以直接嵌入到HTML文档中. 增强用户交互性. 下面通过一个例子来对JavaScrip

《Windows 8 开发权威指南:HTML5 和JavaScript卷》——导读

前言 2011年9月14日,微软发布了Windows 8开发者预览版,宣布兼容移动终端,这意味着Windows操作系统开始向更多平台迈进,包括平板电脑和PC.2012年2月微软又发布了Windows 8消费者预览版,可在平板电脑上使用. Windows 8大幅度改变了以往的操作逻辑,对屏幕触控提供更佳的支持.Windows 8 抛弃了旧版本 Windows 系统一直沿用的工具栏和"开始"菜单,采用了全新风格的用户界面,各种应用程序.快捷方式等能以动态方块的"磁贴"样

前端常见兼容性问题系列7: 部分浏览器不支持音频自动播放

1.问题又来了 曾做一个活动页,需要打开页面时自动播放一小段背景音乐.因为音乐持续时间非常短,所以设计这个页面时,没想要设置一个播放控制按钮.一开始我也以为确实没有必要.开发中,用我的老古董机器小米2S测了也没发现啥问题. 但是,用iOS机器测试时,问题就来了,有的平台中可以听到背景音乐(如iOS中的支付宝),有的则始终出不来(如iOS 中的Safari浏览器).用JavaScript来load音频,再自动触发音频的play()方法,也没有效果. 2.定位问题.查找原因 Google一番发现原来