MUI音乐播放html5+audio模块
html5+ audio 模块
MUI播放音频 Audio模块用于提供音频的录制和播放功能,可调用系统的麦克风设备进行录音操作,也可调用系统的扬声器设备播放音频文件。通过plus.audio获取音频管理对象。
权限
"Audio": {
"description": "访问音频设备"
}
录音
// 扩展API加载完毕,现在可以正常调用扩展API
function onPlusReady() {
r = plus.audio.getRecorder();
}
function startRecord() {
if ( r == null ) {
alert( "Device not ready!" );
return;
}
r.record( {filename:"_doc/audio/xx.amr"}, function () {//真机测试文件在/sdcard/Android/data/io.dcloud.HBuilder/.HBuilder/apps/HBuilder/doc下面(.HBuilder是隐藏的,要查看隐藏的文件)
alert( "Audio record success!" );
}, function ( e ) {
alert( "Audio record failed: " + e.message );
} );
}
这样录音就被保存下来了
播放录音
function player(){//播放音乐
s = plus.audio.createPlayer( "_doc/audio/gg.mp3" );
var num = s.getDuration();//获取音频总长度number
setTimeout(function(){//延时获取,否则可能没有返回长度
var num = s.getDuration();
alert(num)
},100)
s.play( function () {//播放完成回调
alert( "Audio play success!" );
}, function ( e ) {//失败回调
alert( "Audio play error: " + e.message );
} );
}
暂停播放:
function pause(){//暂停播放
s.pause();
}
恢复播放:
function resume() {//恢复播放
s.resume();
}
跳到指定位置播放(快进):
function seekTo(){
s.seekTo(100);
}
完整测试代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Audio Example</title>
<script type="text/javascript">
// 扩展API加载完毕后调用onPlusReady回调函数
document.addEventListener( "plusready", onPlusReady, false );
var r = null;
// 扩展API加载完毕,现在可以正常调用扩展API
function onPlusReady() {
r = plus.audio.getRecorder();
}
function startRecord() {
if ( r == null ) {
alert( "Device not ready!" );
return;
}
r.record( {filename:"_doc/audio/xx.amr"}, function () {//真机测试文件在/sdcard/Android/data/io.dcloud.HBuilder/.HBuilder/apps/HBuilder/doc下面(.HBuilder是隐藏的,要查看隐藏的文件)
alert( "Audio record success!" );
}, function ( e ) {
alert( "Audio record failed: " + e.message );
} );
}
function stopRecord() {
r.stop();
}
function player(){//播放音乐
s = plus.audio.createPlayer( "_doc/audio/gg.mp3" );
var num = s.getDuration();//获取音频总长度number
setTimeout(function(){//延时获取,否则可能没有返回长度
var num = s.getDuration();
alert(num)
},100) s.play( function () {
alert( "Audio play success!" );
}, function ( e ) {
alert( "Audio play error: " + e.message );
} );
}
function pause(){//暂停播放
s.pause();
}
function resume() {//恢复播放
s.resume();
}
function seekTo(){
s.seekTo(100);
}
</script>
</head>
<body>
<input type="button" value="Start Record" onclick="startRecord();"/>
<br/>
<input type="button" value="Stop Record" onclick="stopRecord();"/>
<br />
<input type="button" value="player" onclick="player();"/>
<br />
<input type="button" value="暂停" onclick="pause();"/>
<br />
<input type="button" value="恢复" onclick="resume();"/>
<br />
<input type="button" value="跳到指定位置" onclick="seekTo();"/> </body>
</html>
MUI音乐播放html5+audio模块的更多相关文章
- 在iOS微信浏览器中自动播放HTML5 audio(音乐)的2种正确方式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 解决html5 audio iphone,ipd,safari不能自动播放问题
html audio 在iPhone,ipd,safari浏览器不能播放是有原因滴 (在safri on ios里面明确指出等待用户的交互动作后才能播放media,也就是说如果你没有得到用户的acti ...
- 关于html5 audio 标签在ios系统上不能正常自动播放的解决办法
由于 iOS Safari 限制不允许 audio autoplay, 必须用户主动交互(例如 click)后才能播放 audio, 因此我们通过一个用户交互事件来主动 play 一下 audio. ...
- HTML5 Audio时代的MIDI音乐文件播放
大家都知道,HTML5 Audio标签能够支持wav, webm, mp3, ogg, acc等格式,但是有个很重要的音乐文件格式midi(扩展名mid)却在各大浏览器中都没有内置的支持,因为mid文 ...
- HTML5项目笔记4:使用Audio API设计绚丽的HTML5音乐播放器
HTML5 有两个很炫的元素,就是Audio和 Video,可以用他们在页面上创建音频播放器和视频播放器,制作一些效果很不错的应用. 无论是视屏还是音频,都是一个容器文件,包含了一些音频轨道,视频轨道 ...
- 使用Audio API设计绚丽的HTML5音乐播放器
HTML5 有两个很炫的元素,就是Audio和 Video,可以用他们在页面上创建音频播放器和视频播放器,制作一些效果很不错的应用. 无论是视屏还是音频,都是一个容器文件,包含了一些音频轨道,视频轨道 ...
- html5,audio音乐播放器
最终,做了自己原来一直想要实现的事儿.得出的结果是,有些事儿一旦開始做了,那么它就并非非常难. 如今的我,正听着自己的播放器放出的<光辉岁月>写这篇周六清晨的博文.写的不是非常好.但也请各 ...
- html5 audio标签微信部分苹果手机不能自动播放音乐终极解决方案
html5 audio标签微信部分苹果手机不能自动播放音乐终极解决方案 大家都知道需要在点击时候后 播放 ps:如果点击ajax 回来播放也不行,必须点击立即播放 要背景自动播放只能采取下面方案< ...
- html5 audio标签切换播放音乐的方法
html5 audio标签切换播放音乐的方法<pre><audio id="music1" preload loop="loop">&l ...
随机推荐
- Django系列之form渲染表单后css样式丢失
最通用的form写法 我们经常看各大网站上写这样的form写法 class SYSAdminPhysicalForm(forms.ModelForm): ''' this form for idc's ...
- 自动换行后缩进怎么做(CSS)?(可用于 Li y 元素的排版)
<style type="text/css">li{ width:100px; border:1px solid #ccc; padding-left:25px; te ...
- Lua环境配置和工具介绍
官网地址:http://www.lua.org/ Lua环境配置方式: (一)环境变量配置方式: (1)官网下载LuaDist,并解压缩到 c:\ (目录可自定义) 例如:C:\ environmen ...
- 对SQL语句进行过滤的函数
/// <summary> /// 过滤SQL非法字符串 /// </summary> /// <param name="value">< ...
- orcle时间
Oracle计算时间差函数 两个Date类型字段:START_DATE,END_DATE,计算这两个日期的时间差 (分别以天,小时,分钟,秒,毫秒): 天: ROUND(TO_NUMBER(END_D ...
- 找不同diff-打补丁patch
Q:为什么要找不同,为什么要打补丁? A: 在Linux应用中,作为DBA,我们知道MySQL跑在Linux系统之上,数据库最重要的追求就是性能,“稳”是重中之重,所以不能动不动就是换系统或是换这换那 ...
- 从Gallery中获取图片示例
一.MainActivity类 package com.example.gallerydemo; import android.net.Uri; import android.os.Bundle; i ...
- 【AI】图像识别-物体检测-百度AI-EasyDL-NodeJS
var https = require('https') var express = require('express'); var app = express(); var bodyParser = ...
- 一句话木马:ASP篇
ASP一句话木马收集: <%eval request("chopper")%> <%execute request("chopper")%&g ...
- SaltStack 使用 Jinja2 模板
Jinja2 是基于 python 的一个模板引擎,如下,使用 Jinja2 实现根据不同的操作系统分发不同的文件: [root@localhost ~]$ cat /srv/salt/test.sl ...