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 ...
随机推荐
- SQL2005数据库置疑处理
2005中遇到置疑.丢失日志时按照网上常见的MSSQL2000修复方法来做, 结果发现行不通,甚至连一步都做不下去.其实,在MSSQL2005在处理置疑问题的思 路与MSSQL2000是一致的,但具体 ...
- Ubuntu下使用dialog制作菜单执行简单脚本
新建test5 #!/bin/bash #using select in the menu temp=$(mktemp -t test.XXXXXX) temp2=$(mktemp -t test2. ...
- 利用opencv作透明重叠人群密度热度图
在作热度图的时候我们经常需要将热度图调整透明度后叠加在原图上达到更好的展示效果.比如检测人气密度的热度图: (来自sensetime) 一般作图的时候会第一时间想到matplotlib,因为可以很方便 ...
- 【转】WCF OpenTimeout, CloseTimeout, SendTimeout, ReceiveTimeout
关于这四个属性,在MSDN中的解释有点敷衍了事.Open/Close/Receive/Send本是HTTP/TCP/SOCKET的概念,Read/Write Operation则是Web Servic ...
- WebBrowser中html元素如何触发winform事件
这个问题来自论坛提问,对dom稍微了解的话还是比较简单的,只要注册一下事件就可以了. C#代码如下: using System;using System.ComponentModel;using Sy ...
- 8 -- 深入使用Spring -- 7... Spring 整合 Struts 2
8.7 Spring 整合 Struts2 8.7.1 启动Spring 容器 8.7.2 MVC框架与Spring整合的思考 8.7.3 让Spring管理控制器 8.7.4 使用自动装配
- Nginx(十)-- 进程模型及工作原理
1.nginx进程模型 Nginx是一个master和worker的模型.master主要用来管理worker进程,master就比作老板,worker就是打工仔,master指挥worker来做事情 ...
- Win10 虚拟桌面
我们可以建立多个桌面,各个桌面上运行的窗口任务互不干扰,这就是虚拟桌面 创建虚拟桌面:Win + Ctrl + D查看虚拟桌面:Win + Tab删除当前虚拟桌面:Win + Ctrl + F4切换到 ...
- RN(八)——react-native-image-viewer & react-native-swiper
以项目(业务GO)为例: react-native-swiper 轮播(用在首页的图集轮播) https://github.com/leecade/react-native-swiper react- ...
- (原创)使用mceusb设备,将lirc移植到android笔记
首先说一下大环境和总体步骤: 下载lirc 0.8.7源码,使用ubuntu的setup.sh,配置为mceusb的驱动,同时Compile tools for X-Windows选项去掉,生成con ...