十：audio 音频

属性名	类型	默认值	说明
id	String		video 组件的唯一标识符
src	String		要播放音频的资源地址
loop	Boolean	false	是否循环播放
controls	Boolean	true	是否显示默认控件
poster	String		默认控件上的音频封面的图片资源地址，如果 controls 属性值为 false 则设置 poster 无效
name	String	未知音频	默认控件上的音频名字，如果 controls 属性值为 false 则设置 name 无效
author	String	未知作者	默认控件上的作者名字，如果 controls 属性值为 false 则设置 author 无效
binderror	EventHandle		当发生错误时触发 error 事件，detail = {errMsg: MediaError.code}
bindplay	EventHandle		当开始/继续播放时触发play事件
bindpause	EventHandle		当暂停播放时触发 pause 事件
bindtimeupdate	EventHandle		当播放进度改变时触发 timeupdate 事件，detail = {currentTime, duration}
bindended	EventHandle		当播放到末尾时触发 ended 事件

这是标签audio的一些属性。。如果当。audio出现错误的时候如 binderror:function(e){}这个方法时 e.detail.errMsg会报如下错误。

返回错误码	描述
MEDIA_ERR_ABORTED	获取资源被用户禁止
MEDIA_ERR_NETWORD	网络错误
MEDIA_ERR_DECODE	解码错误
MEDIA_ERR_SRC_NOT_SUPPOERTED	不合适资源

例外 audio 还有一个是 action 属性，这个属性接受的参数是一个object类型。他有两个值是：method 和 data

method	描述	data
play	播放
pause	暂停
setPlaybackRate	调整速度	倍速
setCurrentTime	设置当前时间	播放时间

另外audio还可可以创建并返回上下文的audioContext对象。。。前端的童鞋可以把他理解成 getElementById。

他的调用方法是 wx.createAudioContext(audioId) 他的方法则如下。

方法	参数	说明
play	无	播放
pause	无	暂停
seek	position(number)	跳转到指定位置，单位 s

/* ---page/test/test.wxml----*/

<audio id="myAudio"

poster="{{poster}}"

name="{{name}}"

author="{{author}}"

src="{{src}}"

controls loop

bindplay="audiobindplay"

bindpause="audiobindpause"

bindtimeupdate="audiobindtimeupdate"

bindended="audiobindended"

binderror="audiobinderror"></audio>

<button type="primary" bindtap="audioPlay">播放</button>

<button type="primary" bindtap="audioPause">暂停</button>

<button type="primary" bindtap="audio14">设置当前播放时间为14秒</button>

/* ---page/test/test.wxml----*/

/* ---page/test/test.js----*/

// audio.js

Page({

onReady: function (e) {

// 使用 wx.createAudioContext 获取 audio 上下文 context

this.audioCtx = wx.createAudioContext(‘myAudio‘)

},

data: {

poster: ‘http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000‘, //图片

name: ‘此时此刻‘, //歌曲名称

author: ‘许巍‘, //作者名称

src: ‘http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E06DCBDC9AB7C49FD713D632D313AC4858BACB8DDD29067D3C601481D36E62053BF8DFEAF74C0A5CCFADD6471160CAF3E6A&fromtag=46‘,

},

//以下是 js的api

audioPlay: function () {

this.audioCtx.play()

},

audioPause: function () {

this.audioCtx.pause()

},

audio14: function () {

this.audioCtx.seek(14)

},

//以下是audio的属性。

audiobindplay:function(e){

console.log("音频开始播放")

},

audiobindpause:function(e){

console.log("音频暂停中")

},

audiobindtimeupdate:function(e){

console.log("修改了当前的播放时间。")

},

audiobindended:function(e){

console.log("音频播放结束")

},

audiobinderror:function(e){

console.log("音频出错了。\n",e.detail.errMsg)

}

})

/* ---page/test/test.js----*/

那么主要注意的是 audiobindtimeupdate 这个方法他并不是用户修改了当前播放时间才执行，而是音乐在播放的时候他都会执行N次。具体执行一下就好了。

时间： 2024-08-28 10:35:01

十：audio 音频的相关文章

[转载]html5 audio音频播放全解析——html5系列

序 html5开启了一个新时代,因为它让浏览器本身变得不那么被动,audio api就是一个典型的列子,在html5还没确定之前,如果想要在听音乐看视频唯一的办法就是用flash意思是当你没有给浏览器装载Flash插件的话那么音乐视频即是空谈,html5 audio的出现改变了这一格局,因为你可以不用Flash插件就可以听音乐看视频,当然这些能否实现还跟你用的浏览器有关. 这是demo地址 http://www.feman.cn/h5/audio.html 在手机上浏览效果会更好文章结构 1

关于HTML5中audio音频播放器的一些理解

最近由于工作需要音频,了解到了HTML5中新兴的audio音频播放器.关于它本身的自带的属性不过多介绍,但是需要着重提到的就是它自身就有play()和pause()两个函数可以拿来直接使用,也就是我们经常遇到的播放和暂停功能.下面是我写的实例,有兴趣的朋友可以下载附件观看.今天晚上能把这个问题搞出来,基本上HTML5中audio的一些常见,常用的需求都可以解决了.开心- <!DOCTYPE HTML> <html> <head> <meta charset=&qu

html5 audio音频播放全解析

序 html5开启了一个新时代,因为它让浏览器本身变得不那么被动,audio api就是一个典型的列子,在html5还没确定之前,如果想要在网页上听音乐看视频唯一的办法就是用flash意思是当你没有给浏览器装载Flash插件的话那么音乐视频即是空谈,html5 audio的出现改变了这一格局,因为你可以不用Flash插件就可以听音乐看视频,当然这些能否实现还跟你用的浏览器有关. 这是demo地址 http://www.feman.cn/h5/audio.html(IE8以下不支持) 在手机上浏

html5 新增媒体标签详解 <audio>音频 <vedio> 视频 <source> <canvas> 标记定义图片<embed> 标记定义外部可交互内容或者插件标记定义图片媒体资源

html5 变得更加简洁易用,新增了不少结构标签比如<article> 标记一篇文章 <header> 定义头部 <footer> 定义底部 <nav> 定义导航 <section> 定义一个区域 <aside> 定义侧边栏 <hgroup> 标记定义文件夹一个区块的相关信息同时也新增了 <audio><vedio><source> 下面我们就来详细的讲解一下这三个媒体标

audio音频

html5的audio功能上已经非常强大,回放,跳转,缓冲等以前只能用flash才能实现的功能,html5的audio都能轻松搞定最近的一个项目使用到了这个功能,把我使用的情况写下来,供大家参考, 因为我需要的功能很简单,所以做的不复杂,如果要使用更多的功能,可以参考下面的api,能实现很多高大上的功能 audio 相关的 api <audio src="音频的地址">备用(当浏览器不支持audio时显示的内容)</audio> 控制函数功能说明 load()

html5 的<audio> 音频 audio的“坑”

<audio>标签是html5的一个非常有意义的特性.告别的flash的时代.它的属性有: autoplay:音频就绪后马上播放 controls:出现该属性,向用户显示播放的控件. loop:是否在音频结束时候从新播放 preload:如果出现该属性,则在页面加载时候进行加载. src:要播放的音频的URL. 方法有: load():从新加载资源. play():开始播放. pause() :暂停播放. 这些都是基础的知识点.如果我们需要让音频自动播放的时候.在iphone中,我们发现是无法

audio音频和video视频标签的使用

<!DOCTYPE html> <html> <head> <title></title> <script> var v=document.getElementsByTagName("video"); function clickV() { if(v.paused) { v.play(); } else { v.pause(); } } function clickBig() { v.width=1000px; v

HTML5之Audio音频标签学习

HTML5中的新元素标签 src:音频文件路径. autobuffer:设置是否在页面加载时自动缓冲音频. autoplay:设置音频是否自动播放. loop:设置音频是否要循环播放. controls:属性供添加播放.暂停和音量控件. 这些属性和<video>元素标签的属性很类似如何工作 <audio src="song.mp3"></audio> 同样 <audio> 与 </audio> 之间插入的内容是供不支持 au

移动端audio音频播放兼容方案

现在很多移动端要求audio播放必需由用户的事件触发,否则就劫持.实际应用中经常会出现JS网络请求通过返回的结果来决定播放什么音频,在移动端是不允许的. 当移动需要通过网络请求回调来播放音频时,就得做点准备工作,具体代码如下: 加载准备处理 /** * 循环处理 * @param {Object} data * @param {Function} callback * @returns {undefined} */ functi