简介

使用Media插件可以在设备上播放音频与录制音频。

注意:当前实现并不是遵循W3C规范的媒体捕捉,这里只是提供方便。未来的实现将坚持最新的W3C规范和可能弃用当前的API。

安装

cordova plugin add cordova-plugin-media

支持的平台

· Android

· BlackBerry 10

· iOS

· Windows Phone 7 and 8

· Tizen

· Windows 8

· Windows

· Browser

使用方法

这个插件定义一个全局媒体构造函数

虽然在全局范围内,这是deviceready事件以后才可用

document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady() {

console.log(Media);

}

详情

Media

初始化Media对象

var media = new Media(src, mediaSuccess, [mediaError], [mediaStatus]);

参数Parameters

src:  一个URI包含了这个音频内容。

mediaSuccess: (可选)一个媒体对象已完成当前播放,记录,或停止行动,执行这个回调函数。(函数)

mediaError: (可选)如果出现错误,执行这个回调函数。(函数)

mediaStatus: (可选)执行显示状态变化的回调函数。(函数)

注意:cdvfile路径可支持到src参数使用:

var my_media = new Media('cdvfile://localhost/temporary/recording.mp3', ...);

常量Constants

下面的常量是报道的唯一参数mediastatus回调:

· Media.MEDIA_NONE = 0;

· Media.MEDIA_STARTING = 1;

· Media.MEDIA_RUNNING = 2;

· Media.MEDIA_PAUSED = 3;

· Media.MEDIA_STOPPED = 4;

方法Methods

media.getCurrentAmplitude: 返回在音频文件的当前位置。

media.getCurrentPosition: 返回在音频文件的当前位置。

media.getDuration: 返回一个音频文件的持续时间。

media.play: 开始或恢复播放一个音频文件。

media.pause: 暂停播放音频文件

media.pauseRecord: 音频文件暂停录音

media.release: 释放操作系统底层的音频资源。

media.resumeRecord: 恢复音频文件记录

media.seekTo: 移动到当前播放音频文件的位置。

media.setVolume: 音频播放的音量设置

media.startRecord: 开始录制音频文件

media.stopRecord: 停止录制音频文件

media.stop: 停止播放音频文件

media.getCurrentAmplitude

返回当前记录的电流幅值。

media.getCurrentAmplitude(mediaSuccess, [mediaError]);

支持的平台Supported Platforms

· Android

· iOS

参数Parameters

mediaSuccess: 回调,通过电流的幅值(0 - 1)。

mediaError: (可选)回调执行如果出现错误。

media.getCurrentPosition

返回在一个音频文件的当前位置。还更新了媒体对象的位置参数.

media.getCurrentPosition(mediaSuccess, [mediaError]);

参数Parameters

mediaSuccess: 回调,当前位置的秒数。

mediaError: (可选)回调执行如果出现错误。

media.getDuration

在短时间内返回一个音频文件的持续时间。如果时间是未知的,它返回的值为1。

media.getDuration();

media.pause

暂停播放音频文件

media.pause();

media.pauseRecord

暂停录制音频文件

media.pauseRecord();

支持的平台Supported Platforms

· iOS

media.play

开始或恢复播放音频文件。

media.play();

media.release

发布操作系统底层的音频资源。这对于Android来说尤为重要,因为有一个有限的媒体播放OpenCore实例。应用程序不再需要任何媒体资源应该调用release 函数。

media.release();

media.resumeRecord

恢复录制音频文件

media.resumeRecord();

支持的平台Supported Platforms

· iOS

media.seekTo

设置当前的位置在一个音频文件。

media.seekTo(milliseconds);

参数Parameters

· milliseconds: 设置播放音频中的位置,以毫秒为单位。

media.setVolume

一个音频文件的音量设置。

media.setVolume(volume);

参数Parameters

· volume: 音量设置播放。该值必须在0到1的范围内。

支持的平台Supported Platforms

· Android

· iOS

media.startRecord

开始录制音频文件

media.startRecord();

支持的平台Supported Platforms

· Android

· iOS

· Windows Phone 7 and 8

· Windows

media.stop

停止播放音频文件

media.stop();

media.stopRecord

停止录制音频文件

media.stopRecord();

支持的平台Supported Platforms

· Android

· iOS

· Windows Phone 7 and 8

· Windows

示例

示例一:音频播放/暂定

index.html:

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;"><meta name="format-detection" content="telephone=no"><meta name="msapplication-tap-highlight" content="no"><meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width"><title>Hello World</title><style>.line{padding: 10px;}</style>
</head>
<body>
<div class="app"><h1>media插件</h1><div class="line"><button id="play">播放</button></div><div class="line"><button id="pause">暂定</button></div><div class="line"><button id="stop">停止</button></div><div class="line"><button id="release">释放</button></div><div id="audio_current"></div><div id="audio_duration"></div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>

index.js:

var app = {initialize: function() {document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);},onDeviceReady: function() {this.receivedEvent();},$$: function(id) {return document.getElementById(id);},receivedEvent: function() {var src = "http://ws.stream.qqmusic.qq.com/C1000031Ecjg1tdNzL.m4a?fromtag=38";var my_media = null;var mediaTimer = null;var timerDur = null;function mediaSuccess() {console.log("Media成功")}function mediaError(err) {console.log("Media失败")}// 开始或恢复播放一个音频文件function playAudio() {if(my_media == null) {// 初始化Media对象my_media = new Media(src, mediaSuccess, mediaError);}// 播放音频my_media.play();}// 暂停播放音频文件function pauseAudio() {if(my_media) {my_media.pause();}// 清除定时器对象clearInterval(mediaTimer);mediaTimer = null;}// 释放操作系统底层的音频资源。function releaseAudio() {if(my_media) {my_media.release();}}// 停止播放音频文件function stopAudio() {if(my_media) {}my_media.stop();// 清除定时器对象clearInterval(mediaTimer);mediaTimer = null;}// 返回在音频文件的当前位置。function getCurrent() {if(mediaTimer == null){mediaTimer = setInterval(function() {my_media.getCurrentPosition(// success callbackfunction(position) {if(position > -1) {console.log((position) + " sec");}document.getElementById('audio_current').innerHTML = position;},// error callbackfunction(e) {console.log("Error getting pos=" + e);});}, 1000);}}// 返回一个音频文件的持续时间。function getDuration() {// Get durationvar counter = 0;var timerDur = setInterval(function() {counter = counter + 100;if(counter > 2000) {clearInterval(timerDur);}var dur = my_media.getDuration();if(dur > 0) {clearInterval(timerDur);document.getElementById('audio_duration').innerHTML = (dur) + " sec";}}, 100);}this.$$("play").onclick = function() {playAudio();getCurrent();getDuration();}this.$$("pause").onclick = function() {pauseAudio();}this.$$("release").onclick = function() {releaseAudio();}this.$$("stop").onclick = function() {stopAudio();}}};app.initialize();

运行:

点击“播放”按钮,开始播放音频。

点击“暂停”按钮,暂定当前音频播放,点击“播放”按钮,继续播放音频。

点击“停止”按钮,音频播放停止。

点击“释放”按钮,音频播放停止,并释放系统底层音频资源。

示例二:录制音频

index.html:

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;"><meta name="format-detection" content="telephone=no"><meta name="msapplication-tap-highlight" content="no"><meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width"><title>Hello World</title><style>.line{padding: 10px;}</style>
</head>
<body>
<div class="app"><h1>media插件</h1><div class="line"><button id="startRecord">开始录制</button></div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>

index.js:

var app = {initialize: function() {document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);},onDeviceReady: function() {this.receivedEvent();},receivedEvent: function() {function mediaSuccess() {console.log("Media成功")}function mediaError(err) {console.log("Media失败")}// 录制音频function recordAudio(){var src = "myrecord.mp3";var mediaRec = new Media(src, mediaSuccess, mediaError);// 启动录制音频mediaRec.startRecord();// 10秒后停止录制var recTime = 0;var recInterval = setInterval(function(){recTime = recTime + 1;if(recTime >= 10){clearInterval(recInterval);mediaRec.stopRecord();alert("录制完成")}},1000);}document.getElementById("startRecord").onclick = function(){recordAudio();}}};app.initialize();

运行:

点击“开始录制”按钮,开始录音

10秒后,自动停止

打开手机文件管理器的根目录,可以找到我们录制的音频文件

cordova media插件相关推荐

  1. cordova media android不播放声音,cordova-plugin-media 录音并打包上传

    一.录音. 插件:cordova-plugin-media 官网中的示例代码很详细了,src可以为"cdvfile://localhost/persistent/"的形式,但我未能 ...

  2. cordova开发插件,并在android studio中开发、调试

    之前用过cordova Lib包装H5页面,自己写插件,但做法是野路子,不符合cordova插件的开发思路,这次项目又需要包装H5页面,同时需要自定义插件.所以又折腾了一次cordova自定义插件. ...

  3. cordova自定义android插件,Cordova 自定义插件(Android版本)

    Cordova 自定义插件(android) 特别注意 android 项目的包名 必须为 com.example.hello,否则编译不会通过. 1.安装命令工具 $ npm i plugman - ...

  4. ionic3 cordova ionic-native插件

    ionic-native插件 cordova安装插件 以及 ionic-native插件 使用过程以及步骤 cordova plugin add cordova-plugin-插件名称. //安装插件 ...

  5. Vue.js 使用cordova camera插件调取相机

    介绍完上文 用Cordova打包Vue项目之后,本文给出在vue.js里如何使用cordova的插件完成调取相机及图库,并完成图片上传的操作. 具体的操作步骤如下 第一步:在cordova项目下安装c ...

  6. vue调用cordova 插件_Vue.js 使用cordova camera插件调取相机

    本文给出在vue.js里如何使用cordova的插件完成调取相机及图库,并完成图片上传的操作. 具体的操作步骤如下 第一步:在cordova项目下安装cordova-plugin-camera插件 c ...

  7. Cordova官方插件 -- Vibration、Media、NativeAudio

    cordova-plugin-vibration 安装(通过命令行) cordova plugin add cordova-plugin-vibration 使用 navigator.vibrate( ...

  8. cordova camera插件——摄像头插件的使用及上传图片

    介绍 cordova提供照相机API与设备相机进行交互. 通过照相机API.我们可以拍摄或者访问照片库中的照片,返回图片的base64编码字符串或者图片的url文件路径. 安装插件 需要cordova ...

  9. Cordova各个插件使用介绍系列(七)—$cordovaStatusbar手机状态栏显示

    在项目中发现Android和iOS在手机状态栏样式不一样,然后就查到有一个cordova插件可以解决这个问题 1.下载插件$cordovaStatusbar命令: cordova plugin add ...

  10. 科大讯飞cordova语音插件填坑及api介绍

    项目要求语音合成,准备调用科大讯飞的cordova插件,百度仅有一篇有价值的参考文章(再吐槽下,百度搜索到各种复制的文章....),谷歌有2篇,但介绍不全,只用typescript列出api,没有ap ...

最新文章

  1. 郑冠杰:KDD Cup城市大脑赛题方法总结!
  2. 【每日一算法】最长公共前缀
  3. Linux信号 三 信号发送接口集合
  4. 1 分钟教会你用 Spring Boot 发邮件
  5. Fragment的布局中自定义Layout的onSizeChanged添加组件失败的问题
  6. 使用SAP Leonardo上的机器学习服务提取图片的特征向量
  7. 前端学习(580):打开开发者工具
  8. Pandas DateOffset
  9. java 1亿个数字中_求一亿个数字里面最小的10个数字
  10. HBase 过滤器使用
  11. 6950有史以来最经典玩机宝典/软件包/导航
  12. play framework自定义插件plugin
  13. 百度翻译API错误码大全(建议收藏)
  14. 互联网公司招聘--奇虎360--软件测试--笔试题
  15. 关于android studio menu键的问题
  16. C++知识之如何利用双缓冲避免在HDC上画图时图像闪烁
  17. 网络安全—Linux命令
  18. Docker基础、进阶笔记,为k8s的学习预预热
  19. 36 个助你成为专家需要掌握的 JavaScript 概念
  20. 深入理解Java虚拟机(周志明第三版)- 第十一章:后端编译与优化

热门文章

  1. vue接入腾讯防水墙代码
  2. 【计算机网络】Web服务器的配置
  3. operators库
  4. 笔记44-JQuery高级笔记
  5. mysql 参考文献_后记amp;参考文献
  6. 一个留美女博士的七年----分享给所有还相信梦想的朋友(zz 喜欢~~)
  7. 电脑登陆网页显示服务器出错,为什么新浪微博用电脑登陆总是提示网络错误
  8. linux gmail邮件服务器,gmail 授权linux服务器登录使用gmail发送邮件
  9. 计算机二级文档技巧,计算机二级选择题技巧
  10. html背景音乐自动播放embed,HTML插入背景音乐方法【全】