1. CIS 136 Building Mobile Apps
Multi-Media
CIS 136 Building Mobile Apps

2. Multimedia Plug-ins
Camera
Media
Media Capture

3. 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

4. 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)

5. 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;

6. 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

7. 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]);

8. 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();

9. pause() executes synchronously, and pauses playing an audio file
Syntax:
media.pause();

10. 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 })

11. 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();

12. 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);

13. 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.

14. startRecord() executes synchronously
starts a recording for an audio file
Syntax:
media.startRecord();

15. stop() executes synchronously stops playing an audio file Syntax:
media.stop();

16. stopRecord() executes synchronously
stops the recording of an audio file
Syntax:
media.stopRecord();

17. 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

18. 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(' }); $(“#pauseIt”).on(“click", function() { pauseAudio() $(“#stopIt”).on(“click", function() { stopAudio(); });

19. Timers

20. 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

21. 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

22. 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');

23. 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