PhoneGap API介绍:Media

移动开发
本文将介绍PhoneGap API——Media:录制和播放音频文件。PhoneGap API Media对象提供录制和回放设备上的音频文件的能力。
  1. var media = new Media(src, mediaSuccess, [mediaError]); 

备注:Media的当前实现并没有遵守W3C媒体捕获的相关规范,目前只是为了提供方便。未来的实现将遵守***的W3C规范并可能不再支持当前的APIs。

参数

  • src:一个包含音频内容的URI。(DOMString类型)
  • mediaSuccess:(可选项)当一个Media对象完成当前的播放、录制或停止操作时触发的回调函数。(函数类型)
  • mediaError:(可选项)当出现错误时调用的回调函数。(函数类型)
  • mediaStatus:(可选项)当状态发生变化的时候调用的回调函数。(函数类型)
方法:

 另外的只读属性:

  • _position:以秒为单位的音频播放位置,播放过程中不会自动更新,通过调用getCurrentPosition进行更新。
  • _duration:以秒为单位的媒体时长。
  • 支持的平台:
  • Android
  • iOS

media.getCurrentPosition

  • 返回返回一个音频文件的当前的位置。
  1. media.getCurrentPosition(mediaSuccess, [mediaError]); 

参数

  • mediaSuccess:成功的回调函数,返回当前的位置。
  • mediaError:(可选项)如果发生错误时调用的回调函数。

说明

  • media.getCurrentPosition是一个异步函数,用户返回一个Media对象所指向的音频文件的当前位置,同时会对Media对象的_position参数进行更新。

支持的平台

  • Android
  • iOS

简单的范例

  1. // 音频播放器 
  2. var my_media = new Media(src, onSuccess, onError); 
  3.  
  4. // 每秒更新一次媒体播放到的位置 
  5. var mediaTimer = setInterval(function() { 
  6.     // 获得媒体位置 
  7.     my_media.getCurrentPosition( 
  8.         // 获得成功后调用的回调函数 
  9.         function(position) { 
  10.             if (position > -1) { 
  11.                 console.log((position/1000) + " sec"); 
  12.             } 
  13.         }, 
  14.         // 发生错误后调用的回调函数 
  15.         function(e) { 
  16.             console.log("Error getting pos=" + e); 
  17.         } 
  18.     ); 
  19. }, 1000); 

完整的范例

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"    "http://www.w3.org/TR/html4/strict.dtd"> 
  2. <html> 
  3. <head>     
  4. <title>Media Example</title> 
  5.  
  6. <script type="text/javascript" charset="utf-8" src="phonegap.js"></script> 
  7. <script type="text/javascript" charset="utf-8"> 
  8.  
  9. // 等待加载PhoneGap 
  10. document.addEventListener("deviceready", onDeviceReady, false); 
  11.  
  12. // PhoneGap加载完毕 
  13. function onDeviceReady() { 
  14.     playAudio("http://audio.ibeat.org/content/p1rj1s/p1rj1s_-_rockGuitar.mp3"); 
  15.  
  16. // 音频播放器 
  17. var my_media = null
  18. var mediaTimer = null
  19.  
  20. // 播放音频 
  21. function playAudio(src) { 
  22.     // 从目标文件创建Media对象 
  23.     my_media = new Media(src, onSuccess, onError); 
  24.  
  25.     // 播放音频 
  26.     my_media.play(); 
  27.  
  28.     // 每秒更新一次媒体播放到的位置 
  29.     if (mediaTimer == null) { 
  30.         mediaTimer = setInterval(function() { 
  31.             // 获取媒体播放到的位置 
  32.             my_media.getCurrentPosition(         
  33.          
  34.                 //获取成功后调用的回调函数 
  35.                 function(position) { 
  36.                     if (position > -1) { 
  37.                         setAudioPosition((position/1000) + " sec"); 
  38.                     } 
  39.                 }, 
  40.                 // 发生错误后调用的回调函数 
  41.                 function(e) { 
  42.                     console.log("Error getting pos=" + e); 
  43.                     setAudioPosition("Error: " + e); 
  44.                 } 
  45.             ); 
  46.         }, 1000); 
  47.     } 
  48.  
  49. // 暂停音频播放 
  50. function pauseAudio() { 
  51.     if (my_media) { 
  52.         my_media.pause(); 
  53.     } 
  54.  
  55. // 停止音频播放 
  56. function stopAudio() { 
  57.     if (my_media) { 
  58.         my_media.stop(); 
  59.     } 
  60.     clearInterval(mediaTimer); 
  61.     mediaTimer = null
  62.  
  63. // 创建Media对象成功后调用的回调函数 
  64. function onSuccess() { 
  65.     console.log("playAudio():Audio Success"); 
  66.  
  67. // 创建Media对象出错后调用的回调函数 
  68. function onError(error) { 
  69.     alert('code: '    + error.code    + '\n' + 
  70.         'message: ' + error.message + '\n'); 
  71.  
  72. // 设置音频播放位置 
  73. function setAudioPosition(position) { 
  74.     document.getElementById('audio_position').innerHTML = position
  75.  
  76. </script> 
  77. </head> 
  78. <body> 
  79.     <a href="#" class="btn large" onclick="playAudio('http://audio.ibeat.org/content/p1rj1s/p1rj1s_-_rockGuitar.mp3');">Play Audio</a> 
  80.     <a href="#" class="btn large" onclick="pauseAudio();">Pause Playing Audio</a> 
  81.     <a href="#" class="btn large" onclick="stopAudio();">Stop Playing Audio</a> 
  82.     <p id="audio_position"></p> 
  83. </body> 
  84. </html> 

media.getDuration

  • 返回音频文件的时间长度。
  1. media.getDuration(); 

说明

  • media.getDuration是一个同步函数,如果音频时长已知的话则返回以秒为单位的音频文件时长,如果时长不可知的话则返回-1。

支持的平台

  • Android
  • iOS

简单的范例

  1. // 音频播放器 
  2. var my_media = new Media(src, onSuccess, onError); 
  3.  
  4. // 获得时间长度 
  5. var counter = 0; 
  6. var timerDur = setInterval(function() { 
  7.     counter = counter + 100; 
  8.     if (counter > 2000) { 
  9.         clearInterval(timerDur); 
  10.     } 
  11.     var dur = my_media.getDuration(); 
  12.     if (dur > 0) { 
  13.         clearInterval(timerDur); 
  14.         document.getElementById('audio_duration').innerHTML = (dur/1000) + " sec"
  15.     } 
  16. }, 100); 

完整的范例

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"    "http://www.w3.org/TR/html4/strict.dtd"> 
  2. <html> 
  3. <head>     
  4. <title>Media Example</title> 
  5.  
  6. <script type="text/javascript" charset="utf-8" src="phonegap.js"></script> 
  7. <script type="text/javascript" charset="utf-8"> 
  8.  
  9.     // 等待加载PhoneGap 
  10.     document.addEventListener("deviceready", onDeviceReady, false); 
  11.      
  12.     // PhoneGap加载完毕 
  13.     function onDeviceReady() { 
  14.         playAudio("http://audio.ibeat.org/content/p1rj1s/p1rj1s_-_rockGuitar.mp3"); 
  15.     } 
  16.      
  17.     // 音频播放器 
  18.     var my_media = null
  19.     var mediaTimer = null
  20.      
  21.     // 播放音频 
  22.     function playAudio(src) { 
  23.         // 从目标文件创建Media对象 
  24.         my_media = new Media(src, onSuccess, onError); 
  25.      
  26.         // 播放音频 
  27.         my_media.play(); 
  28.      
  29.         // 每秒更新一次媒体播放到的位置 
  30.         if (mediaTimer == null) { 
  31.             mediaTimer = setInterval(function() { 
  32.                 // 获取媒体播放到的位置 
  33.                 my_media.getCurrentPosition( 
  34.                     // 获取成功后调用的回调函数 
  35.                     function(position) { 
  36.                         if (position > -1) { 
  37.                             setAudioPosition((position/1000) + " sec"); 
  38.                         } 
  39.                     }, 
  40.                     // 发生错误后调用的回调函数 
  41.                     function(e) { 
  42.                         console.log("Error getting pos=" + e); 
  43.                         setAudioPosition("Error: " + e); 
  44.                     } 
  45.                 ); 
  46.             }, 1000); 
  47.         } 
  48.     } 
  49.      
  50.     // 暂停音频播放 
  51.     function pauseAudio() { 
  52.         if (my_media) { 
  53.             my_media.pause(); 
  54.         } 
  55.     } 
  56.      
  57.     // 停止音频播放 
  58.     function stopAudio() { 
  59.         if (my_media) { 
  60.             my_media.stop(); 
  61.         } 
  62.         clearInterval(mediaTimer); 
  63.         mediaTimer = null
  64.     } 
  65.      
  66.     // 创建Media对象成功后调用的回调函数 
  67.     function onSuccess() { 
  68.         console.log("playAudio():Audio Success"); 
  69.     } 
  70.      
  71.     // 创建Media对象出错后调用的回调函数 
  72.     function onError(error) { 
  73.         alert('code: '    + error.code    + '\n' + 
  74.             'message: ' + error.message + '\n'); 
  75.     } 
  76.      
  77.     // 设置音频播放位置 
  78.     function setAudioPosition(position) { 
  79.         document.getElementById('audio_position').innerHTML = position
  80.     } 
  81.  
  82. </script> 
  83. </head> 
  84. <body> 
  85.     <a href="#" class="btn large" onclick="playAudio('http://audio.ibeat.org/content/p1rj1s/p1rj1s_-_rockGuitar.mp3');">Play Audio</a> 
  86.     <a href="#" class="btn large" onclick="pauseAudio();">Pause Playing Audio</a> 
  87.     <a href="#" class="btn large" onclick="stopAudio();">Stop Playing Audio</a> 
  88.     <p id="audio_position"></p> 
  89. </body> 
  90. </html> 


media.play

  • 开始或恢复播放一个音频文件。
  1. media.play(); 

说明

  • media.play是一个用于开始或恢复播放音频文件的同步函数。

支持的平台

  • Android
  • iOS

简单的范例

  1. // 播放音频文件 
  2. function playAudio(url) { 
  3.     // 播放url指向的音频文件 
  4.     var my_media = new Media(url, 
  5.     // 播放成功后调用的回调函数 
  6.     function() { 
  7.            console.log("playAudio():Audio Success"); 
  8.     }, 
  9.     // 播放出错后调用的回调函数 
  10.     function(err) { 
  11.         console.log("playAudio():Audio Error: "+err); 
  12.     }); 
  13.  
  14. // 播放音频文件 
  15. my_media.play(); 

完整的范例

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"    "http://www.w3.org/TR/html4/strict.dtd"> 
  2. <html> 
  3. <head>     
  4. <title>Media Example</title> 
  5.  
  6. <script type="text/javascript" charset="utf-8" src="phonegap.js"></script> 
  7. <script type="text/javascript" charset="utf-8"> 
  8.  
  9.     // 等待加载PhoneGap 
  10.     document.addEventListener("deviceready", onDeviceReady, false); 
  11.      
  12.     // PhoneGap加载完毕 
  13.     function onDeviceReady() { 
  14.         playAudio("http://audio.ibeat.org/content/p1rj1s/p1rj1s_-_rockGuitar.mp3"); 
  15.     } 
  16.      
  17.     // 音频播放器 
  18.     var my_media = null
  19.     var mediaTimer = null
  20.      
  21.     // 播放音频文件 
  22.     function playAudio(src) { 
  23.         // 从目标文件创建Media对象 
  24.         my_media = new Media(src, onSuccess, onError); 
  25.      
  26.         // 播放音频 
  27.         my_media.play(); 
  28.      
  29.         // 每秒更新一次媒体播放到的位置 
  30.         if (mediaTimer == null) { 
  31.             mediaTimer = setInterval(function() { 
  32.                 // 获取媒体播放到的位置 
  33.                 my_media.getCurrentPosition( 
  34.                     // 获取成功后调用的回调函数 
  35.                     function(position) { 
  36.                         if (position > -1) { 
  37.                             setAudioPosition((position/1000) + " sec"); 
  38.                         } 
  39.                     }, 
  40.                     // 发生错误后调用的回调函数 
  41.                     function(e) { 
  42.                         console.log("Error getting pos=" + e); 
  43.                         setAudioPosition("Error: " + e); 
  44.                     } 
  45.                 ); 
  46.             }, 1000); 
  47.         } 
  48.     } 
  49.      
  50.     // 暂停音频播放 
  51.     function pauseAudio() { 
  52.         if (my_media) { 
  53.             my_media.pause(); 
  54.         } 
  55.     } 
  56.      
  57.     // 停止音频播放        
  58.     function stopAudio() { 
  59.         if (my_media) { 
  60.             my_media.stop(); 
  61.         } 
  62.         clearInterval(mediaTimer); 
  63.         mediaTimer = null
  64.     } 
  65.      
  66.     // 创建Media对象成功后调用的回调函数 
  67.     function onSuccess() { 
  68.         console.log("playAudio():Audio Success"); 
  69.     } 
  70.      
  71.     // 创建Media对象出错后调用的回调函数 
  72.     function onError(error) { 
  73.         alert('code: '    + error.code    + '\n' + 
  74.               'message: ' + error.message + '\n'); 
  75.     } 
  76.      
  77.     // 设置音频播放位置 
  78.     function setAudioPosition(position) { 
  79.         document.getElementById('audio_position').innerHTML = position
  80.     } 
  81.  
  82. </script> 
  83. </head> 
  84. <body> 
  85.     <a href="#" class="btn large" onclick="playAudio('http://audio.ibeat.org/content/p1rj1s/p1rj1s_-_rockGuitar.mp3');">Play Audio</a> 
  86.     <a href="#" class="btn large" onclick="pauseAudio();">Pause Playing Audio</a> 
  87.     <a href="#" class="btn large" onclick="stopAudio();">Stop Playing Audio</a> 
  88.     <p id="audio_position"></p> 
  89. </body> 
  90. </html> 

media.pause

  • 暂停播放一个音频文件。
  1. media.pause(); 

说明

  • media.pause是一个用于暂停播放音频文件的同步函数。

支持的平台

  • Android
  • iOS

简单的范例

  1. // 播放音频 
  2. function playAudio(url) { 
  3.     // 播放url指向的音频文件 
  4.     var my_media = new Media(url, 
  5.         // 获取成功后调用的回调函数 
  6.         function() { 
  7.             console.log("playAudio():Audio Success"); 
  8.         }, 
  9.         // 发生错误后调用的回调函数 
  10.         function(err) { 
  11.             console.log("playAudio():Audio Error: "+err); 
  12.         } 
  13.     ) 
  14.  
  15.     // 播放音频 
  16.     my_media.play(); 
  17.  
  18.     // 暂停10秒钟 
  19.     setTimeout(function() { 
  20.         media.pause(); 
  21.        }, 10000);         

完整的范例

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"    "http://www.w3.org/TR/html4/strict.dtd"> 
  2. <html> 
  3. <head>     
  4. <title>Media Example</title> 
  5.  
  6. <script type="text/javascript" charset="utf-8" src="phonegap.js"></script> 
  7. <script type="text/javascript" charset="utf-8"> 
  8.  
  9.     // 等待加载PhoneGap 
  10.     document.addEventListener("deviceready", onDeviceReady, false); 
  11.      
  12.     // PhoneGap加载完毕 
  13.     function onDeviceReady() { 
  14.         playAudio("http://audio.ibeat.org/content/p1rj1s/p1rj1s_-_rockGuitar.mp3"); 
  15.     } 
  16.      
  17.     // 音频播放器 
  18.     var my_media = null
  19.     var mediaTimer = null
  20.      
  21.     // 播放音频 
  22.     function playAudio(src) { 
  23.         // 从目标播放文件创建Media对象 
  24.         my_media = new Media(src, onSuccess, onError); 
  25.         // 播放音频 
  26.         my_media.play(); 
  27.      
  28.         // 每秒更新一次媒体播放到的位置 
  29.         if (mediaTimer == null) { 
  30.             mediaTimer = setInterval(function() { 
  31.                 // 获取媒体播放到的位置 
  32.                 my_media.getCurrentPosition( 
  33.                     // 获取成功后调用的回调函数 
  34.                     function(position) { 
  35.                         if (position > -1) { 
  36.                             setAudioPosition((position/1000) + " sec"); 
  37.                         } 
  38.                     }, 
  39.                     // 发生错误后调用的回调函数 
  40.                     function(e) { 
  41.                         console.log("Error getting pos=" + e); 
  42.                         setAudioPosition("Error: " + e); 
  43.                     } 
  44.                 ); 
  45.             }, 1000); 
  46.         } 
  47.     } 
  48.      
  49.     // 暂停音频播放 
  50.     function pauseAudio() { 
  51.         if (my_media) { 
  52.             my_media.pause(); 
  53.         } 
  54.     } 
  55.      
  56.     // 停止音频播放 
  57.     function stopAudio() { 
  58.         if (my_media) { 
  59.             my_media.stop(); 
  60.         } 
  61.         clearInterval(mediaTimer); 
  62.         mediaTimer = null
  63.     } 
  64.      
  65.     // 创建Media对象成功后调用的回调函数 
  66.     function onSuccess() { 
  67.         console.log("playAudio():Audio Success"); 
  68.     } 
  69.      
  70.     // 创建Media对象出错后调用的回调函数 
  71.     function onError(error) { 
  72.         alert('code: '    + error.code    + '\n' + 
  73.             'message: ' + error.message + '\n'); 
  74.     } 
  75.      
  76.     // 设置音频播放位置 
  77.     function setAudioPosition(position) { 
  78.         document.getElementById('audio_position').innerHTML = position
  79.     } 
  80.  
  81. </script> 
  82. </head> 
  83. <body> 
  84.     <a href="#" class="btn large" onclick="playAudio('http://audio.ibeat.org/content/p1rj1s/p1rj1s_-_rockGuitar.mp3');">Play Audio</a> 
  85.     <a href="#" class="btn large" onclick="pauseAudio();">Pause Playing Audio</a> 
  86.     <a href="#" class="btn large" onclick="stopAudio();">Stop Playing Audio</a> 
  87.     <p id="audio_position"></p> 
  88. </body> 
  89. </html> 

media.release

  • 释放底层操作系统音频资源。
  1. media.release(); 

说明

  • media.release是一个用于释放系统音频资源的同步函数。该函数对于Android系统尤为重要,因为Android系统的OpenCore(多媒体核心)的实例是有限的。开发者需要在他们不再需要相应Media资源时调用“release”函数释放它。

支持的平台

  • Android
  • iOS

简单的范例

  1. // 音频播放器 
  2. var my_media = new Media(src, onSuccess, onError); 
  3.  
  4. my_media.play(); 
  5. my_media.stop(); 
  6. my_media.release(); 

完整的范例

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"    "http://www.w3.org/TR/html4/strict.dtd"> 
  2. <html> 
  3. <head>     
  4. <title>Media Example</title> 
  5.  
  6. <script type="text/javascript" charset="utf-8" src="phonegap.js"></script> 
  7. <script type="text/javascript" charset="utf-8"> 
  8.  
  9.     // 等待加载PhoneGap 
  10.     document.addEventListener("deviceready", onDeviceReady, false); 
  11.      
  12.     // PhoneGap加载完毕 
  13.     function onDeviceReady() { 
  14.         playAudio("http://audio.ibeat.org/content/p1rj1s/p1rj1s_-_rockGuitar.mp3"); 
  15.     } 
  16.      
  17.     // 音频播放器 
  18.     var my_media = null
  19.     var mediaTimer = null
  20.     // 播放音频 
  21.     function playAudio(src) { 
  22.         // 从目标播放文件创建Media对象 
  23.         my_media = new Media(src, onSuccess, onError); 
  24.      
  25.         // 播放音频 
  26.         my_media.play(); 
  27.      
  28.         // 每秒更新一次媒体播放到的位置 
  29.         if (mediaTimer == null) { 
  30.             mediaTimer = setInterval(function() { 
  31.                 // 获取媒体播放到的位置 
  32.                 my_media.getCurrentPosition( 
  33.                     // 获取成功后调用的回调函数 
  34.                     function(position) { 
  35.                         if (position > -1) { 
  36.                             setAudioPosition((position/1000) + " sec"); 
  37.                         } 
  38.                     }, 
  39.                     // 发生错误后调用的回调函数 
  40.                     function(e) { 
  41.                         console.log("Error getting pos=" + e); 
  42.                         setAudioPosition("Error: " + e); 
  43.                     } 
  44.                 ); 
  45.             }, 1000); 
  46.         } 
  47.     } 
  48.      
  49.     // 暂停音频播放        
  50.     function pauseAudio() { 
  51.         if (my_media) { 
  52.             my_media.pause(); 
  53.         } 
  54.     } 
  55.      
  56.     // 停止音频播放 
  57.     function stopAudio() { 
  58.         if (my_media) { 
  59.             my_media.stop(); 
  60.         } 
  61.         clearInterval(mediaTimer); 
  62.         mediaTimer = null
  63.     } 
  64.      
  65.     // 创建Media对象成功后调用的回调函数        
  66.     function onSuccess() { 
  67.         console.log("playAudio():Audio Success"); 
  68.     } 
  69.      
  70.     // 创建Media对象出错后调用的回调函数        
  71.     function onError(error) { 
  72.         alert('code: '    + error.code    + '\n' + 
  73.             'message: ' + error.message + '\n'); 
  74.     } 
  75.      
  76.     // 设置音频播放位置 
  77.     function setAudioPosition(position) { 
  78.         document.getElementById('audio_position').innerHTML = position
  79.     } 
  80.  
  81. </script> 
  82. </head> 
  83. <body> 
  84.     <a href="#" class="btn large" onclick="playAudio('http://audio.ibeat.org/content/p1rj1s/p1rj1s_-_rockGuitar.mp3');">Play Audio</a> 
  85.     <a href="#" class="btn large" onclick="pauseAudio();">Pause Playing Audio</a> 
  86.     <a href="#" class="btn large" onclick="stopAudio();">Stop Playing Audio</a> 
  87.     <p id="audio_position"></p> 
  88. </body> 
  89. </html> 

media.startRecord

  • 开始录制一个音频文件。
  1. media.startRecord(); 

说明

  • media.startRecord是用于开始录制一个音频文件的同步函数。

支持的平台

  • Android
  • iOS

简单的范例

  1. // 录制音频 
  2. function recordAudio() { 
  3.     var src = "myrecording.mp3"
  4.     var mediaRec = new Media(src, 
  5.            // 新建Media对象成功后调用的回调函数 
  6.            function() { 
  7.                console.log("recordAudio():Audio Success"); 
  8.            }, 
  9.  
  10.            // 新建Media对象出错后调用的回调函数 
  11.            function(err) { 
  12.                console.log("recordAudio():Audio Error: "+ err.code); 
  13.            } 
  14.     ); 
  15.  
  16.     // 录制音频 
  17.     mediaRec.startRecord(); 

完整的范例

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"    "http://www.w3.org/TR/html4/strict.dtd"> 
  2. <html> 
  3. <head>     
  4. <title>Device Properties Example</title> 
  5.  
  6. <script type="text/javascript" charset="utf-8" src="phonegap.js"></script> 
  7. <script type="text/javascript" charset="utf-8"> 
  8.  
  9.     // 等待加载PhoneGap 
  10.     document.addEventListener("deviceready", onDeviceReady, false); 
  11.      
  12.     // 录制音频 
  13.     function recordAudio() { 
  14.         var src = "myrecording.mp3"
  15.         var mediaRec = new Media(src, onSuccess, onError); 
  16.      
  17.         // 开始录制音频 
  18.         mediaRec.startRecord(); 
  19.      
  20.         // 10秒钟后停止录制 
  21.         var recTime = 0
  22.         var recInterval = setInterval(function() { 
  23.             recTimerecTime = recTime + 1; 
  24.             setAudioPosition(recTime + " sec"); 
  25.             if (recTime >= 10) { 
  26.                 clearInterval(recInterval); 
  27.                 mediaRec.stopRecord(); 
  28.             } 
  29.         }, 1000); 
  30.     } 
  31.      
  32.     // PhoneGap加载完毕 
  33.     function onDeviceReady() { 
  34.         recordAudio(); 
  35.     } 
  36.      
  37.     // 创建Media对象成功后调用的回调函数 
  38.     function onSuccess() { 
  39.         console.log("recordAudio():Audio Success"); 
  40.     } 
  41.      
  42.     // 创建Media对象出错后调用的回调函数 
  43.     function onError(error) { 
  44.         alert('code: '    + error.code    + '\n' + 
  45.               'message: ' + error.message + '\n'); 
  46.     } 
  47.      
  48.     // 设置音频播放位置 
  49.     function setAudioPosition(position) { 
  50.         document.getElementById('audio_position').innerHTML = position
  51.     } 
  52.  
  53. </script> 
  54. </head> 
  55. <body> 
  56.     <a href="#" class="btn large" onclick="playAudio('http://audio.ibeat.org/content/p1rj1s/p1rj1s_-_rockGuitar.mp3');">Play Audio</a> 
  57.     <a href="#" class="btn large" onclick="pauseAudio();">Pause Playing Audio</a> 
  58.     <a href="#" class="btn large" onclick="stopAudio();">Stop Playing Audio</a> 
  59.     <p id="audio_position"></p> 
  60. </body> 
  61. </html> 

iOS 的特异情况

  • 用于录制的文件必须已经存在并是.wav类型,可以通过File API来进行文件的创建。

media.stop

  • 停止播放一个音频文件。
  1. media.stop(); 

说明

  • media.stop函数是一个用于停止播放音频文件的同步函数。

支持的平台

  • Android
  • iOS

简单的范例

  1. // 播放音频 
  2. function playAudio(url) { 
  3. // 播放url指向的音频文件 
  4. var my_media = new Media(url, 
  5.     // 新建Media对象成功后调用的回调函数 
  6.        function() { 
  7.            console.log("playAudio():Audio Success"); 
  8.        }, 
  9.        // 新建Media对象出错后调用的回调函数 
  10.        function(err) { 
  11.            console.log("playAudio():Audio Error: "+err); 
  12.     } 
  13. ); 
  14.  
  15. // 播放音频 
  16. my_media.play(); 
  17.  
  18. // 10秒钟后暂停播放 
  19. setTimeout(function() { 
  20.        my_media.stop(); 
  21.     }, 10000);         

完整的范例

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"    "http://www.w3.org/TR/html4/strict.dtd"> 
  2. <html> 
  3. <head>     
  4. <title>Media Example</title> 
  5.  
  6. <script type="text/javascript" charset="utf-8" src="phonegap.js"></script> 
  7. <script type="text/javascript" charset="utf-8"> 
  8.  
  9.     // 等待加载PhoneGap 
  10.     document.addEventListener("deviceready", onDeviceReady, false); 
  11.      
  12.     // PhoneGap加载完毕 
  13.     function onDeviceReady() { 
  14.         playAudio("http://audio.ibeat.org/content/p1rj1s/p1rj1s_-_rockGuitar.mp3"); 
  15.     } 
  16.      
  17.     // 音频播放器 
  18.     var my_media = null
  19.     var mediaTimer = null
  20.      
  21.     // 播放音频 
  22.     function playAudio(src) { 
  23.         // 从目标播放文件创建Media对象 
  24.         my_media = new Media(src, onSuccess, onError); 
  25.      
  26.         // 播放音频 
  27.         my_media.play(); 
  28.      
  29.         // 每秒更新一次媒体播放到的位置 
  30.         if (mediaTimer == null) { 
  31.             mediaTimer = setInterval(function() { 
  32.                 // 获取媒体播放到的位置 
  33.                 my_media.getCurrentPosition( 
  34.                     // 获取成功后调用的回调函数 
  35.                     function(position) { 
  36.                         if (position > -1) { 
  37.                             setAudioPosition((position/1000) + " sec"); 
  38.                         } 
  39.                     }, 
  40.                     // 发生错误后调用的回调函数 
  41.                     function(e) { 
  42.                         console.log("Error getting pos=" + e); 
  43.                         setAudioPosition("Error: " + e); 
  44.                     } 
  45.                 ); 
  46.             }, 1000); 
  47.         } 
  48.     } 
  49.      
  50.     // 暂停音频播放 
  51.     function pauseAudio() { 
  52.         if (my_media) { 
  53.             my_media.pause(); 
  54.         } 
  55.     } 
  56.      
  57.     // 停止音频播放        
  58.     function stopAudio() { 
  59.         if (my_media) { 
  60.             my_media.stop(); 
  61.         } 
  62.         clearInterval(mediaTimer); 
  63.         mediaTimer = null
  64.     } 
  65.      
  66.     // 创建Media对象成功后调用的回调函数        
  67.     function onSuccess() { 
  68.         console.log("playAudio():Audio Success"); 
  69.     } 
  70.      
  71.     // 创建Media对象出错后调用的回调函数 
  72.     function onError(error) { 
  73.         alert('code: '    + error.code    + '\n' + 
  74.               'message: ' + error.message + '\n'); 
  75.     } 
  76.      
  77.     // 设置音频播放位置 
  78.     function setAudioPosition(position) { 
  79.         document.getElementById('audio_position').innerHTML = position
  80.     } 
  81.  
  82. </script> 
  83. </head> 
  84. <body> 
  85.     <a href="#" class="btn large" onclick="playAudio('http://audio.ibeat.org/content/p1rj1s/p1rj1s_-_rockGuitar.mp3');">Play Audio</a> 
  86.     <a href="#" class="btn large" onclick="pauseAudio();">Pause Playing Audio</a> 
  87.     <a href="#" class="btn large" onclick="stopAudio();">Stop Playing Audio</a> 
  88.     <p id="audio_position"></p> 
  89. </body> 
  90. </html> 

media.stopRecord

  • 停止录制一个音频文件。
  1. media.stopRecord(); 

说明

  • media.stopRecord是用于停止录制一个音频文件的同步函数。

支持的平台

  • Android
  • iOS

简单的范例

  1. // 录制音频 
  2. function recordAudio() { 
  3.     var src = "myrecording.mp3"
  4.     var mediaRec = new Media(src, 
  5.         // 新建Media对象成功后调用的回调函数 
  6.         function() { 
  7.             console.log("recordAudio():Audio Success"); 
  8.         }, 
  9.  
  10.         // 新建Media对象出错后调用的回调函数 
  11.         function(err) { 
  12.             console.log("recordAudio():Audio Error: "+ err.code); 
  13.         } 
  14.     ); 
  15.  
  16.     // 开始录制音频 
  17.     mediaRec.startRecord(); 
  18.  
  19.     // 10秒后停止录制 
  20.     setTimeout(function() { 
  21.         mediaRec.stopRecord(); 
  22.     }, 10000); 

完整的范例

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head>     
  4. <title>Device Properties Example</title> 
  5.  
  6. <script type="text/javascript" charset="utf-8" src="phonegap.js"></script> 
  7. <script type="text/javascript" charset="utf-8"> 
  8.  
  9.     // 等待加载PhoneGap 
  10.     document.addEventListener("deviceready", onDeviceReady, false);   
  11.      
  12.     // 录制音频 
  13.     function recordAudio() { 
  14.         var src = "myrecording.mp3"
  15.         var mediaRec = new Media(src, onSuccess, onError); 
  16.      
  17.         // 开始录制音频 
  18.         mediaRec.startRecord(); 
  19.      
  20.         // 10秒后停止录制 
  21.         var recTime = 0
  22.         var recInterval = setInterval(function() { 
  23.             recTimerecTime = recTime + 1; 
  24.             setAudioPosition(recTime + " sec"); 
  25.             if (recTime >= 10) { 
  26.                 clearInterval(recInterval); 
  27.                 mediaRec.stopRecord(); 
  28.             } 
  29.         }, 1000); 
  30.     } 
  31.      
  32.     // PhoneGap加载完毕 
  33.     function onDeviceReady() { 
  34.         recordAudio(); 
  35.     } 
  36.      
  37.     // 新建Media对象成功后调用的回调函数 
  38.     function onSuccess() { 
  39.         console.log("recordAudio():Audio Success"); 
  40.     } 
  41.      
  42.     // 新建Media对象出错后调用的回调函数 
  43.     function onError(error) { 
  44.         alert('code: '    + error.code    + '\n' +   
  45.               'message: ' + error.message + '\n'); 
  46.     } 
  47.      
  48.     // 设置音频播放位置 
  49.     function setAudioPosition(position) { 
  50.         document.getElementById('audio_position').innerHTML = position
  51.     } 
  52.  
  53. </script> 
  54. </head> 
  55. <body> 
  56.     <p id="media">Recording audio...</p> 
  57.     <p id="audio_position"></p> 
  58. </body> 
  59. </html> 

MediaError

  • 当发生错误时,一个MediaError对象将传递给mediaError回调函数。

属性

  • code:一个在下面常量列表中定义的错误代码。
  • message:用于描述错误细节的错误信息。

常量

  • MediaError.MEDIA_ERR_ABORTED:媒体中断错误
  • MediaError.MEDIA_ERR_NETWORK:网络错误
  • MediaError.MEDIA_ERR_DECODE:编码错误
  • MediaError.MEDIA_ERR_NONE_SUPPORTED:格式不支持

说明

  • 当发生错误时,一个MediaError对象将通过mediaError回调函数传递给用户。

mediaError

  • 一个用户指定的回调函数,当媒体函数出现错误的时候被调用。
  1. function(error) { 
  2.     // 处理错误 

参数

  • error:设备返回的错误信息。(MediaError类型)

 

责任编辑:佚名 来源: PhoneGap中国
相关推荐

2011-12-19 16:09:32

PhoneGap APCamera

2011-12-20 11:20:46

PhoneGap APCompass

2011-09-13 14:40:16

PhoneGap AP

2011-12-22 09:27:36

PhoneGap APGeolocation

2011-12-19 16:26:39

PhoneGap APCapture

2011-12-22 10:33:39

PhoneGap APNotificatio

2011-12-22 10:45:32

PhoneGap APStorage

2011-12-20 15:34:55

PhoneGap APConnection

2011-12-21 21:56:45

PhoneGap APFile

2011-12-20 17:15:52

PhoneGap APEvents

2011-12-19 15:30:25

AccelerometPhoneGap AP

2011-12-20 13:32:52

PhoneGap APContacts

2011-12-20 16:09:57

PhoneGap APDevice

2011-12-30 13:47:57

PhoneGap AP视频Contacts

2011-12-30 13:59:38

PhoneGap APDevice视频

2011-12-30 14:09:32

PhoneGap APCompass视频

2011-12-30 14:13:05

PhoneGap APCamera视频

2011-12-30 14:05:17

PhoneGap APConnection视频

2011-12-30 14:16:02

AccelerometPhoneGap AP视频

2011-07-05 17:29:53

PhoneGapevents
点赞
收藏

51CTO技术栈公众号