CIS 136 Building Mobile Apps Multi-Media CIS 136 Building Mobile Apps
Multimedia Plug-ins Camera Media Media Capture
Media API provides the ability to record and play back audio files on a device Although it has global scope, it is not available until after the deviceready event completes
Media Object Syntax: Parameters var media = new Media(src, mediaSuccess, [mediaError], [mediaStatus]); Parameters src: A URI containing the audio content. (DOMString) mediaSuccess: (Optional) The callback that executes after a Media object has completed the current play, record, or stop action. (Function) mediaError: (Optional) The callback that executes if an error occurs. (Function) mediaStatus: (Optional) The callback that executes to indicate status changes. (Function)
Media Status parameter The following constants parameters to the mediaStatus callback: •Media.MEDIA_NONE = 0; •Media.MEDIA_STARTING = 1; •Media.MEDIA_RUNNING = 2; •Media.MEDIA_PAUSED = 3; •Media.MEDIA_STOPPED = 4;
Media Object Methods media.getCurrentPosition(): Returns the current position within an audio file •media.getDuration(): Returns the duration of an audio file •media.play(): Start or resume playing an audio file •media.pause(): Pause playback of an audio file •media.release(): Releases the underlying operating system's audio resources •media.seekTo(): Moves the position within the audio file •media.setVolume(): Set the volume for audio playback •media.startRecord(): Start recording an audio file •media.stopRecord(): Stop recording an audio file •media.stop(): Stop playing an audio file
getCurrentPosition() An asynchronous function that returns the current position of the underlying audio file of a Media object Updates the Media object's position property Position property: The position within the audio playback, in seconds. Not automatically updated during play Must call getCurrentPosition() again to get new position Syntax: media.getCurrentPosition(mediaSuccess, [mediaError]);
getDuration() executes synchronously, returning the duration of the audio file in seconds, if known The duration of the media, in seconds. If the duration is unknown, it returns a value of -1 Syntax: media.getDuration();
pause() executes synchronously, and pauses playing an audio file Syntax: media.pause();
play() executes synchronously, and starts or resumes playing an audio file. Syntax: media.play(); Parameters: numberOfLoops: Pass this option to the play method to specify the number of times you want the media file to play myMedia.play({ numberOfLoops: 2 }) playAudioWhenScreenIsLocked: Pass in this option to the play method to specify whether you want to allow playback when the screen is locked. If set to true (the default value), the state of the hardware mute button is ignored myMedia.play({ playAudioWhenScreenIsLocked : false })
release() executes synchronously, releasing the underlying operating system's audio resources important for Android, since there are a finite amount of OpenCore instances for media playback Apps should call the release function for any Media resource that is no longer needed Syntax: Media.release();
seekTo executes asynchronously, updating the current playback position within an audio file referenced by a Media object updates the Media object's position parameter Syntax: Media.seekTo(milliseconds);
setVolume() asynchronous function that sets the volume during audio playback Syntax: media.setVolume(volume); volume: The volume to set for playback. The value must be within the range of 0.0 to 1.0.
startRecord() executes synchronously starts a recording for an audio file Syntax: media.startRecord();
stop() executes synchronously stops playing an audio file Syntax: media.stop();
stopRecord() executes synchronously stops the recording of an audio file Syntax: media.stopRecord();
MediaError Object Created and returned when an error occurs Properties: code: MediaError.MEDIA_ERR_ABORTED MediaError.MEDIA_ERR_NETWORK MediaError.MEDIA_ERR_DECODE MediaError.MEDIA_ERR_NONE_SUPPORTED message: describes details of the error
Example <body> <a href="#" class="btn large" id=“playIt” >Play Audio</a> <a href="#" class="btn large" id=“pauseIt">Pause Playing Audio</a> <a href="#" class="btn large" id=“stopIt">Stop Playing Audio</a> <p id="audio_pos"></p> </body> <script > $(document).on("deviceready", function() { $(“#playIt”).on(“click", function() { playAudio('http://audio.ibeat.org/content/p1rj1s/p1rj1s_-_rockGuitar.mp3');" }); $(“#pauseIt”).on(“click", function() { pauseAudio() $(“#stopIt”).on(“click", function() { stopAudio(); });
Timers
Working with a Timer A timer will run your code automatically based on time elements: setInterval() method Executes the same code continually at intervals clearInterval() method Cancels the setInterval() method call
setInterval -continuous var variable = setInterval("code", millisecondsToRepeat); <script> var counter = 100; $(‘#button’).on(“click”,function(){ var begin=setInterval(countDown(),1000); }); function countDown() { navigator.notification.alert(counter + “ bottles of root beer on the wall”); count--; } </script> </head> <body> </body> </html> CD
Example Creates media object function setAudioPosition(position) { var my_media = null; var mediaTimer = null; function playAudio(src) { my_media = new Media(src, onSuccess, onError); my_media.play(); //update play position every second if (mediaTimer == null) { mediaTimer = setInterval(startLoop , 1000); } } function onSuccess() { console.log("playAudio():Audio Success"); } function startLoop() { my_media.getCurrentPosition(onGetOK, onError); } function onGetOK(position) { if (position > -1) { setAudioPosition(position) + " sec"); function setAudioPosition(position) { document.getElementById('audio_pos').innerHTML = position; function onError(error) { alert('code: ' + error.code + '\n' + 'message: ' + error.message + '\n');
Example Only pause if media object was created // Pause audio function pauseAudio() { if (my_media) { my_media.pause(); } // Stop audio function stopAudio() { my_media.stop(); clearInterval(mediaTimer); mediaTimer = null; Only stop if media object was created