Quantcast
Channel: CSDN博客移动开发推荐文章
Viewing all articles
Browse latest Browse all 5930

cordova media插件

$
0
0


简介

使用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音量设置播放。该值必须在01的范围内。

 

支持的平台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 callback
                        function(position) {
                            if(position > -1) {
                                console.log((position) + " sec");
                            }
                            document.getElementById('audio_current').innerHTML = position;
                        },
                        // error callback
                        function(e) {
                            console.log("Error getting pos=" + e);
                        }
                    );
                }, 1000);
          }
      }

      // 返回一个音频文件的持续时间。
      function getDuration() {
         // Get duration
         var 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秒后,自动停止


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








作者:michael_ouyang 发表于2017/7/24 12:12:37 原文链接
阅读:50 评论:0 查看评论

Viewing all articles
Browse latest Browse all 5930

Trending Articles