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 ...
随机推荐
- 2 BeeGo 参数配置与路由配置
beeGo 的参数配置 beeGo默认会解析当前应用下的conf/app.conf文件 默认的配置如下: appname = WEB httpport = 8080 runmode = dev run ...
- Lua之转义字符
print("\a"); --bell 硬件滴一声 print("a"); print("\b"); --back space ...
- Python下字符画(ascii art)生成
之前在b站上看到有人用C写了个脚本把妹抖龙op转换成字符画的形式输出了,感觉比较好玩在下就用python也写了一遍(主要是因为python比较简单好用).这里就这里就不介绍字符画了,因为能搜到这个的肯 ...
- linux proc目录介绍
https://www.cnblogs.com/DswCnblog/p/5780389.html
- python使用tkinter写带界面的工具
python一般用来写纯脚本的居多,但也可以做有视图的产品出来,例如做网页和客户端工具.做成工具的好处是,让不懂代码的人也能使用,不需要去修改代码里面的参数,如果使用次数频繁,甚至比纯脚本跟节约时间: ...
- nyoj 1239 引水project (河南省第八届acm程序设计大赛)
题目1239 pid=1239" style="color:rgb(55,119,188)">题目信息 pid=1239" style="col ...
- 九度 1557:和谐答案 (LIS 变形)
题目描述: 在初试即将开始的最后一段日子里,laxtc重点练习了英语阅读的第二部分,他发现了一个有意思的情况.这部分的试题最终的答案总是如下形式的:1.A;2.C;3.D;4.E;5.F.即共有六个空 ...
- JavaScript-this理解
javascript this可以绑定到:全局对象,自己定义的对象,用构造函数生成的对象,通过call或者apply更改绑定的对象 1.全局对象 function globalTest(nam ...
- 【安全开发】IOS安全编码规范
申明:本文非笔者原创,原文转载自:https://github.com/SecurityPaper/SecurityPaper-web/blob/master/_posts/2.SDL%E8%A7%8 ...
- python --help查询python相关命令
C:\Users\lenovo>python --help usage: python [option] ... [-c cmd | -m mod | file | -] [arg] ... O ...