blob: 8a7cda5bfdf96cda2bdf503f07b57062db1c92b8 [file] [log] [blame]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
<meta name="description" content=" ">
<title>
media.play - Apache Cordova
</title>
<link rel="SHORTCUT ICON" href="/favicon.ico"/>
<link rel="canonical" href="https://cordova.apache.org/docs/en/latest/cordova/media/media.play.html">
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="/static/css/main.css">
<link rel="stylesheet" type="text/css" href="/static/css/lib/syntax.css">
<!-- Fonts -->
<!-- For attribution information, see www/attributions.html -->
<link href='https://fonts.googleapis.com/css?family=Raleway:700,400,300,700italic,400italic,300italic' rel='stylesheet' type='text/css'>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<script type="text/javascript">
var disqus_developer = 1; // this would set it to developer mode
</script>
<!-- JS -->
<script defer type="text/javascript" src="/static/js/lib/jquery-2.1.1.min.js"></script>
<script defer type="text/javascript" src="/static/js/lib/bootstrap.min.js"></script>
<!-- Matomo -->
<script>
var _paq = window._paq = window._paq || [];
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function() {
var u="https://analytics.apache.org/";
_paq.push(['setTrackerUrl', u+'matomo.php']);
_paq.push(['setSiteId', '16']);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
})();
</script>
<!-- End Matomo Code -->
</head>
<body>
<header>
<a class="scroll-point pt-top" name="top"></a>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/"><img id="logo_top" src="/static/img/cordova-logo-newbrand.svg"/></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<div class="nav_bar_center">
<ul class="nav navbar-nav">
<li class="active">
<a href="/docs/en/latest/">Documentation</a>
</li>
<li >
<a href="/plugins">Plugins</a>
</li>
<li >
<a href="/blog" id="blog_button">Blog<span class="badge" id="new_blog_count"></span></a>
</li>
<li >
<a href="/contribute">Contribute</a>
</li>
<li >
<a href="/contribute/team.html">Team</a>
</li>
<li>
<a href="/#getstarted">Get Started</a>
</li>
<li>
<form class="navbar-form navbar-right" id="header-search-form" role="search">
<div class="input-group">
</div>
</form>
</li>
</ul>
</div>
</div><!--/.navbar-collapse -->
</div>
</nav>
<div id="_fixed_navbar_spacer" style="padding-top:50px"></div>
</header>
<div class="docs">
<!-- Table of Contents -->
<div class="hidden-xs hidden-sm site-toc-container">
<ul class="site-toc">
<li>
<a class="" href="/docs/en/2.2.0/">
</a>
</li>
<li>
<a class="" href="/docs/en/2.2.0/cordova/accelerometer/accelerometer.html">
Accelerometer
</a>
</li>
<li>
<a class="" href="/docs/en/2.2.0/cordova/camera/camera.html">
Camera
</a>
</li>
<li>
<a class="" href="/docs/en/2.2.0/cordova/media/capture/capture.html">
Capture
</a>
</li>
<li>
<a class="" href="/docs/en/2.2.0/cordova/compass/compass.html">
Compass
</a>
</li>
<li>
<a class="" href="/docs/en/2.2.0/cordova/connection/connection.html">
Connection
</a>
</li>
<li>
<a class="" href="/docs/en/2.2.0/cordova/contacts/contacts.html">
Contacts
</a>
</li>
<li>
<a class="" href="/docs/en/2.2.0/cordova/device/device.html">
Device
</a>
</li>
<li>
<a class="" href="/docs/en/2.2.0/cordova/events/events.html">
Events
</a>
</li>
<li>
<a class="" href="/docs/en/2.2.0/cordova/file/file.html">
File
</a>
</li>
<li>
<a class="" href="/docs/en/2.2.0/cordova/geolocation/geolocation.html">
Geolocation
</a>
</li>
<li>
<a class="" href="/docs/en/2.2.0/cordova/globalization/globalization.html">
Globalization
</a>
</li>
<li>
<a class="" href="/docs/en/2.2.0/cordova/media/media.html">
Media
</a>
</li>
<li>
<a class="" href="/docs/en/2.2.0/cordova/notification/notification.html">
Notification
</a>
</li>
<li>
<a class="" href="/docs/en/2.2.0/cordova/splashscreen/splashscreen.html">
Splashscreen
</a>
</li>
<li>
<a class="" href="/docs/en/2.2.0/cordova/storage/storage.html">
Storage
</a>
</li>
<li>
<a class="" href="/docs/en/2.2.0/guide/getting-started/index.html">
Getting Started Guides
</a>
</li>
<li>
<a class="" href="/docs/en/2.2.0/guide/command-line/index.html">
Command-Line Usage
</a>
</li>
<li>
<a class="" href="/docs/en/2.2.0/guide/upgrading/index.html">
Upgrading Guides
</a>
</li>
<li>
<a class="" href="/docs/en/2.2.0/guide/project-settings/index.html">
Project Settings
</a>
</li>
<li>
<a class="" href="/docs/en/2.2.0/guide/plugin-development/index.html">
Plugin Development Guide
</a>
</li>
<li>
<a class="" href="/docs/en/2.2.0/guide/whitelist/index.html">
Domain Whitelist Guide
</a>
</li>
<li>
<a class="" href="/docs/en/2.2.0/guide/cordova-webview/index.html">
Embedding WebView
</a>
</li>
</ul>
</div>
<!-- Page content -->
<div class="page-content-container">
<div class="page-content">
<div class="content-header">
<!-- ToC Dropdown (for XS and SM sizes only) -->
<div class="toc-dropdown dropdown visible-xs-block visible-sm-block">
<button class="btn btn-default dropdown-toggle" type="button" id="tocDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Table of Contents
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>
<a class="" href="/docs/en/2.2.0/">
</a>
</li>
<li>
<a class="" href="/docs/en/2.2.0/cordova/accelerometer/accelerometer.html">
Accelerometer
</a>
</li>
<li>
<a class="" href="/docs/en/2.2.0/cordova/camera/camera.html">
Camera
</a>
</li>
<li>
<a class="" href="/docs/en/2.2.0/cordova/media/capture/capture.html">
Capture
</a>
</li>
<li>
<a class="" href="/docs/en/2.2.0/cordova/compass/compass.html">
Compass
</a>
</li>
<li>
<a class="" href="/docs/en/2.2.0/cordova/connection/connection.html">
Connection
</a>
</li>
<li>
<a class="" href="/docs/en/2.2.0/cordova/contacts/contacts.html">
Contacts
</a>
</li>
<li>
<a class="" href="/docs/en/2.2.0/cordova/device/device.html">
Device
</a>
</li>
<li>
<a class="" href="/docs/en/2.2.0/cordova/events/events.html">
Events
</a>
</li>
<li>
<a class="" href="/docs/en/2.2.0/cordova/file/file.html">
File
</a>
</li>
<li>
<a class="" href="/docs/en/2.2.0/cordova/geolocation/geolocation.html">
Geolocation
</a>
</li>
<li>
<a class="" href="/docs/en/2.2.0/cordova/globalization/globalization.html">
Globalization
</a>
</li>
<li>
<a class="" href="/docs/en/2.2.0/cordova/media/media.html">
Media
</a>
</li>
<li>
<a class="" href="/docs/en/2.2.0/cordova/notification/notification.html">
Notification
</a>
</li>
<li>
<a class="" href="/docs/en/2.2.0/cordova/splashscreen/splashscreen.html">
Splashscreen
</a>
</li>
<li>
<a class="" href="/docs/en/2.2.0/cordova/storage/storage.html">
Storage
</a>
</li>
<li>
<a class="" href="/docs/en/2.2.0/guide/getting-started/index.html">
Getting Started Guides
</a>
</li>
<li>
<a class="" href="/docs/en/2.2.0/guide/command-line/index.html">
Command-Line Usage
</a>
</li>
<li>
<a class="" href="/docs/en/2.2.0/guide/upgrading/index.html">
Upgrading Guides
</a>
</li>
<li>
<a class="" href="/docs/en/2.2.0/guide/project-settings/index.html">
Project Settings
</a>
</li>
<li>
<a class="" href="/docs/en/2.2.0/guide/plugin-development/index.html">
Plugin Development Guide
</a>
</li>
<li>
<a class="" href="/docs/en/2.2.0/guide/whitelist/index.html">
Domain Whitelist Guide
</a>
</li>
<li>
<a class="" href="/docs/en/2.2.0/guide/cordova-webview/index.html">
Embedding WebView
</a>
</li>
</ul>
</div>
<a class="edit" href="https://github.com/apache/cordova-docs/tree/master/www/docs/en/2.2.0/cordova/media/media.play.md"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> </a>
<!-- Version dropdown -->
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="versionDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
2.2.0
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="versionDropdown">
<!-- List versions available in this language -->
<li>
<a href="/docs/en/dev/" class="missing-page">
dev
</a>
</li>
<li>
<a href="/docs/en/latest/cordova/media/media.play.html" class="">
12.x
(Latest)
</a>
</li>
<li>
<a href="/docs/en/11.x/" class="missing-page">
11.x
</a>
</li>
<li>
<a href="/docs/en/10.x/" class="missing-page">
10.x
</a>
</li>
<li>
<a href="/docs/en/9.x/" class="missing-page">
9.x
</a>
</li>
<li>
<a href="/docs/en/8.x/" class="missing-page">
8.x
</a>
</li>
<li>
<a href="/docs/en/7.x/" class="missing-page">
7.x
</a>
</li>
<li>
<a href="/docs/en/6.x/" class="missing-page">
6.x
</a>
</li>
<li>
<a href="/docs/en/5.4.0/" class="missing-page">
5.4.0
</a>
</li>
<li>
<a href="/docs/en/5.1.1/" class="missing-page">
5.1.1
</a>
</li>
<li>
<a href="/docs/en/5.0.0/" class="missing-page">
5.0.0
</a>
</li>
<li>
<a href="/docs/en/4.0.0/" class="missing-page">
4.0.0
</a>
</li>
<li>
<a href="/docs/en/3.6.0/" class="missing-page">
3.6.0
</a>
</li>
<li>
<a href="/docs/en/3.5.0/" class="missing-page">
3.5.0
</a>
</li>
<li>
<a href="/docs/en/3.4.0/" class="missing-page">
3.4.0
</a>
</li>
<li>
<a href="/docs/en/3.3.0/" class="missing-page">
3.3.0
</a>
</li>
<li>
<a href="/docs/en/3.2.0/" class="missing-page">
3.2.0
</a>
</li>
<li>
<a href="/docs/en/3.1.0/" class="missing-page">
3.1.0
</a>
</li>
<li>
<a href="/docs/en/3.0.0/" class="missing-page">
3.0.0
</a>
</li>
<li>
<a href="/docs/en/2.9.0/" class="missing-page">
2.9.0
</a>
</li>
<li>
<a href="/docs/en/2.8.0/" class="missing-page">
2.8.0
</a>
</li>
<li>
<a href="/docs/en/2.7.0/" class="missing-page">
2.7.0
</a>
</li>
<li>
<a href="/docs/en/2.6.0/" class="missing-page">
2.6.0
</a>
</li>
<li>
<a href="/docs/en/2.5.0/" class="missing-page">
2.5.0
</a>
</li>
<li>
<a href="/docs/en/2.4.0/" class="missing-page">
2.4.0
</a>
</li>
<li>
<a href="/docs/en/2.3.0/" class="missing-page">
2.3.0
</a>
</li>
<li>
<a href="/docs/en/2.2.0/" class="missing-page">
<span class="selected">
2.2.0
</span>
</a>
</li>
<li>
<a href="/docs/en/2.1.0/" class="missing-page">
2.1.0
</a>
</li>
<li>
<a href="/docs/en/2.0.0/" class="missing-page">
2.0.0
</a>
</li>
<li>
<a href="/docs/en/1.9.0/" class="missing-page">
1.9.0
</a>
</li>
<li>
<a href="/docs/en/1.8.1/" class="missing-page">
1.8.1
</a>
</li>
<li>
<a href="/docs/en/1.8.0/" class="missing-page">
1.8.0
</a>
</li>
<li>
<a href="/docs/en/1.7.0/" class="missing-page">
1.7.0
</a>
</li>
<li>
<a href="/docs/en/1.6.1/" class="missing-page">
1.6.1
</a>
</li>
<li>
<a href="/docs/en/1.6.0/" class="missing-page">
1.6.0
</a>
</li>
<li>
<a href="/docs/en/1.5.0/" class="missing-page">
1.5.0
</a>
</li>
</ul>
</div>
</div>
<!-- Show warnings for special versions -->
<!-- dev warning -->
<!-- outdated warning -->
<div class="alert docs-alert alert-danger" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
This version of the documentation is outdated!
<a href="/docs/en/latest/cordova/media/media.play.html">
Click here for the latest released version.
</a>
</div>
<!-- plugin version warning -->
<div id="page-toc-source">
<h1>media.play</h1>
<p>Starts or resumes playing an audio file.</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>media.play();
</code></pre></div></div>
<h2>Description</h2>
<p>Function <code>media.play</code> is a synchronous function that starts or resumes playing an audio file.</p>
<h2>Supported Platforms</h2>
<ul>
<li>Android</li>
<li>BlackBerry WebWorks (OS 5.0 and higher)</li>
<li>iOS</li>
<li>Windows Phone 7 ( Mango )</li>
<li>Tizen</li>
</ul>
<h2>Quick <a href="../storage/storage.opendatabase.html">Example</a></h2>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>// Play audio
//
function playAudio(url) {
// Play the audio file at url
var my_media = new Media(url,
// success callback
function() {
console.log("playAudio():Audio Success");
},
// error callback
function(err) {
console.log("playAudio():Audio Error: "+err);
});
// Play audio
my_media.play();
}
</code></pre></div></div>
<h2>Full <a href="../storage/storage.opendatabase.html">Example</a></h2>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code> &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Media Example&lt;/title&gt;
&lt;script type="text/javascript" charset="utf-8" src="cordova-2.2.0.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" charset="utf-8"&gt;
// Wait for Cordova to load
//
document.addEventListener("deviceready", onDeviceReady, false);
// Cordova is ready
//
function onDeviceReady() {
playAudio("http://audio.ibeat.org/content/p1rj1s/p1rj1s_-_rockGuitar.mp3");
}
// Audio player
//
var my_media = null;
var mediaTimer = null;
// Play audio
//
function playAudio(src) {
if (my_media == null) {
// Create Media object from src
my_media = new Media(src, onSuccess, onError);
} // else play current audio
// Play audio
my_media.play();
// Update my_media position every second
if (mediaTimer == null) {
mediaTimer = setInterval(function() {
// get my_media position
my_media.getCurrentPosition(
// success callback
function(position) {
if (position &gt; -1) {
setAudioPosition((position) + " sec");
}
},
// error callback
function(e) {
console.log("Error getting pos=" + e);
setAudioPosition("Error: " + e);
}
);
}, 1000);
}
}
// Pause audio
//
function pauseAudio() {
if (my_media) {
my_media.pause();
}
}
// Stop audio
//
function stopAudio() {
if (my_media) {
my_media.stop();
}
clearInterval(mediaTimer);
mediaTimer = null;
}
// onSuccess Callback
//
function onSuccess() {
console.log("playAudio():Audio Success");
}
// onError Callback
//
function onError(error) {
alert('code: ' + error.code + '\n' +
'message: ' + error.message + '\n');
}
// Set audio position
//
function setAudioPosition(position) {
document.getElementById('audio_position').innerHTML = position;
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;a href="#" class="btn large" onclick="playAudio('http://audio.ibeat.org/content/p1rj1s/p1rj1s_-_rockGuitar.mp3');"&gt;Play Audio&lt;/a&gt;
&lt;a href="#" class="btn large" onclick="pauseAudio();"&gt;Pause Playing Audio&lt;/a&gt;
&lt;a href="#" class="btn large" onclick="stopAudio();"&gt;Stop Playing Audio&lt;/a&gt;
&lt;p id="audio_position"&gt;&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre></div></div>
<h2>BlackBerry WebWorks Quirks</h2>
<ul>
<li>BlackBerry devices support a limited number of simultaneous audio channels. CDMA devices only support a single audio channel. Other devices support up to two simultaneous channels. Attempting to play more audio files then the supported amount will result in previous playback being stopped.</li>
</ul>
<h2>iOS Quirk</h2>
<ul>
<li>
<p><strong>numberOfLoops</strong></p>
<p>Pass in this option to the <strong>play</strong> method to specify the number of times you want the media file to play. e.g:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code> var myMedia = new Media("http://audio.ibeat.org/content/p1rj1s/p1rj1s_-_rockGuitar.mp3")
myMedia.play({ numberOfLoops: 2 })
</code></pre></div> </div>
</li>
<li>
<p><strong>playAudioWhenScreenIsLocked</strong></p>
<p>Pass in this option to the <strong>play</strong> method to specify whether you want to play the audio of the media file when the screen is locked (this defaults to true if not set). If this is set to true, it will ignore the state of the hardware mute button. e.g:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code> var myMedia = new Media("http://audio.ibeat.org/content/p1rj1s/p1rj1s_-_rockGuitar.mp3")
myMedia.play({ playAudioWhenScreenIsLocked : false })
</code></pre></div> </div>
</li>
</ul>
</div>
</div>
<div class="row">
<div class="blue-divider"></div>
<footer>
<div class="container-fluid">
<div class="row">
<div class="col-sm-9">
<h1>More Resources</h1>
<div class="row">
<div class="col-sm-4">
<h2>General</h2>
<ul class="nav">
<li>
<a target="_blank" href="https://projects.apache.org/project.html?cordova">Apache Project Page</a>
</li>
<li>
<a href="https://www.apache.org/dyn/closer.cgi/cordova">Source Distribution</a>
</li>
<li>
<a target="_blank" href="https://www.apache.org/licenses">License</a>
</li>
<li>
<a href="/artwork">Artwork</a>
</li>
</ul>
</div>
<div class="col-sm-4">
<h2>Development</h2>
<ul class="nav">
<li><a target="_blank" href="https://github.com/apache?utf8=%E2%9C%93&amp;q=cordova-">Source Code</a></li>
<li><a target="_blank" href="https://github.com/apache/cordova#filing-a-bug">Issue Tracker</a></li>
<li><a target="_blank" href="https://stackoverflow.com/questions/tagged/cordova">Stack Overflow</a></li>
<li><a href="/contact">Mailing List</a></li>
<li><a href="/contribute/nightly_builds.html">Nightly builds</a></li>
</ul>
</div>
<div class="col-sm-4">
<h2>Apache Software Foundation</h2>
<ul class="nav">
<li>
<a target="_blank" href="https://www.apache.org/">About ASF</a>
</li>
<li>
<a target="_blank" href="https://www.apache.org/events/current-event">Events</a>
</li>
<li>
<a target="_blank" href="https://www.apache.org/foundation/sponsorship.html">Become a Sponsor</a>
</li>
<li>
<a target="_blank" href="https://www.apache.org/foundation/thanks.html">Thanks</a>
</li>
<li>
<a target="_blank" href="https://www.apache.org/security/">Security</a>
</li>
<li>
<a target="_blank" href="https://privacy.apache.org/policies/privacy-policy-public.html">Privacy policy</a>
</li>
</ul>
</div>
</div>
</div>
<div class="col-sm-3">
<h1>Contribute</h1>
<p style="padding-top:20px"><strong>Help Cordova move forward!</strong></p>
<p>Report bugs, improve the docs, or contribute to the code.</p>
<a href="/contribute" class="btn btn-lg btn-primary">
Learn More
</a>
<p style="padding-top:20px"> <a href="https://twitter.com/apachecordova" class="twitter-follow-button" data-show-count="false">Follow @apachecordova</a></p>
</div>
</div>
<p class="copyright_text">
Copyright &copy; 2024 <a href="https://apache.org">The Apache Software Foundation</a>, Licensed under the <a target="_blank" href="https://www.apache.org/licenses/">Apache License, Version 2.0</a>.<br/>
Apache and the Apache feather logos are <a target="_blank" href="https://www.apache.org/foundation/marks/list/">trademarks</a> of The Apache Software Foundation.
<br/>
<p>See the <a href="/attributions/">attributions page</a> for other copyright & trademark notices.</p>
</p>
</div>
</footer>
</div>
</div>
</div>
<script defer type="text/javascript" src="/static/js/lib/toc.min.js"></script>
<script defer type="text/javascript" src="/static/js/docs.js"></script>
<script defer type="text/javascript" src="/static/js/index.js"></script>
<script defer type="text/javascript" src="/static/js/twitter.js"></script>
</body>
</html>