This topic describes how your application can play audio content using the HTML5 "audio" element.
HTMLMediaElement Interface
HTML audio element
The HTML5 audio element is a standard way to embed audio content in Web applications. You can use the audio element to stream audio files on a device. The audio element inherits all the properties and methods of the HTMLMediaElement interface.
audio
Samsung devices support a variety of standard audio formats. For more information on the supported formats, see the Media Specifications.
To create an audio player using HTML5:
Create an audio element, and add attributes and properties. You can create the element in HTML or in JavaScript:
In HTML:
<body> <audio id='audio' src='yourAudioURI' loop controls> </audio> </body>
The following are some basic attributes for the HTML audio element. For more information, see the HTML <audio> element.
autoplay
controls
loop
muted
preload
src
In JavaScript:
var audioElement = document.createElement('audio'); audioElement.src = 'yourAudioURI'; audioElement.loop = true; audioElement.controls = true; audioElement.load(); document.body.appendChild(audioElement);
The following are some basic properties for the JavaScript audio element. You can also use the HTML attributes as properties. For more information, see the HTMLMediaElement Properties.
audioTracks
buffered
currentTime
duration
ended
paused
volume
Note The audio element only differs from the video element by having no visual component to the player. Attributes related to the visual component, such as height, width, and poster image, are not supported by the audio element.
The audio element only differs from the video element by having no visual component to the player. Attributes related to the visual component, such as height, width, and poster image, are not supported by the audio element.
video
Define event listeners. For more information on the available events, see Media events.
var audioElement = document.getElementById('audio'); audioElement.addEventListener('loadeddata', function () { console.log('Audio loaded.'); }); audioElement.addEventListener('timeupdate', function () { console.log('Current time: ' + audioElement.currentTime); }); audioElement.addEventListener('seeked', function () { console.log('Seek operation completed.'); }); audioElement.addEventListener('stalled', function () { console.log('Audio stalled.'); }); audioElement.addEventListener('ended', function () { console.log('Audio ended.'); });
Control the playback:
Use the HTMLMediaElement Methods to control the audio player:
addTextTrack()
canPlayType()
load()
source
pause()
play()
To move to a specific time in the media, set the currentTime property. The currentTime property sets or returns the current playback position, in seconds. When you set this property, the playback jumps to the specified position in the audio.
var audioElement = document.getElementById('audio'); /* Move 10 seconds forward */ var seekTime = audioElement.currentTime + 10; if (seekTime >= 0 && seekTime <= audioElement.duration) { audioElement.currentTime = seekTime; } /* Move 10 seconds back */ var seekTime = audioElement.currentTime - 10; if (seekTime >= 0 && seekTime <= audioElement.duration) { audioElement.currentTime = seekTime; } /* Move timeline to 30 seconds */ audioElement.currentTime = 30;
Note If the meta data of the media file is loaded, you can move to the specified time position even when the media file is not playing. For more information, see Retrieving Media Information.
If the meta data of the media file is loaded, you can move to the specified time position even when the media file is not playing. For more information, see Retrieving Media Information.
To control the playback rate (trick play) of the media, set the playbackRate property as a multiplier for the playback rate. Positive values for the playbackRate property play the media forwards, while negative values cause the media to play in reverse.
playbackRate
var audioElement = document.getElementById('audio'); /* Set to half speed */ var speed = 0.5; audioElement.playbackRate = speed; /* Set to double speed */ var speed = 2.0; audioElement.playbackRate = speed;
To add multiple audio files to an audio player, for playing in sequence:
Create a source element for each audio file you want to add.
<audio id='audio'> <source class='active' src='yourAudioURI_1'></source> <source src='yourAudioURI_2'></source> </audio>
Note To improve application performance, you can optionally add the type attribute to each source element. By indicating the MIME types of the media files using the type attribute, you can immediately skip media in formats that are not supported by the device.
To improve application performance, you can optionally add the type attribute to each source element. By indicating the MIME types of the media files using the type attribute, you can immediately skip media in formats that are not supported by the device.
type
When the first audio file has finished playing, start playback for the next file:
var audioElement = document.getElementById('audio'); audioElement.addEventListener('ended', function(e){ var activeSource = document.querySelector('#audio source.active'); var nextSource = document.querySelector('#audio source.active + source') || document.querySelector('#audio source:first-child'); // deactivate current source, and activate the next one activeSource.className = ''; nextSource.className = 'active'; // update the audio source and start playback audioElement.src = nextSource.src; audioElement.play(); })
The error property returns an instance of the MediaError interface, which returns a numerical code value representing the error state of the media element.
error
var audioElement = document.getElementById('audio'); audioElement.addEventListener('error', function() { /* Audio playback failed: show an error message */ switch (audioElement.error.code) { case 1: // 'MEDIA_ERR_ABORTED : 1, Media data download is stopped by the user' break; case 2: // 'MEDIA_ERR_NETWORK : 2, Download is stopped due to network error' break; case 3: // 'MEDIA_ERR_DECODE : 3, Media data decoding failure' break; case 4: // 'MEDIA_ERR_SRC_NOT_SUPPORTED : 4, Format not supported' break } }, false);