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 Samsung TV. The <audio> element inherits all the properties and methods of the HTMLMediaElement interface.
Samsung TVs support a variety of standard audio formats. For more information on the supported formats, see the Media Specifications.
Implementing an Audio Player
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:
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: Lists the audio tracks contained in the element.
buffered: Returns the time ranges that the audio player has buffered.
currentTime: Indicates the current playback position, in seconds.
duration: Indicates the length of the media, in seconds.
ended: Indicates whether the media has finished playing.
paused: Indicates whether the media playback is paused.
volume: Indicates the audio volume, where 0.0 is silent and 1.0 is loudest.
NoteThe <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.
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.');
});
addTextTrack(): Add a text track to the audio player.
canPlayType(): Determine whether the specified media type can be played.
load(): Reset the audio player and restart media playback. This method can be useful for releasing resources after any src attribute and <source> element descendants have been removed.
pause(): Pause media playback. If playback is already paused, this method has no effect.
play(): Begin media playback.
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;
NoteIf 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.
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;
Embedding Multiple Audio Files
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.
NoteTo 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 TV.
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();
})
Handling Errors
The error property returns an instance of the MediaError interface, which returns a numerical code value representing the error state of the media element.
Value
Name
Description
1
MEDIA_ERR_ABORTED
Fetching process aborted by the user
2
MEDIA_ERR_NETWORK
Network error occurred during downloading
3
MEDIA_ERR_DECODE
Error occurred during decoding
4
MEDIA_ERR_SRC_NOT_SUPPORTED
Media format not supported
Table 1. Media error states
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);
Manage Your Cookies
We use cookies to improve your experience on our website and to show you relevant
advertising. Manage you settings for our cookies below.
Essential Cookies
These cookies are essential as they enable you to move around the website. This
category cannot be disabled.
Company
Domain
Samsung Electronics
.samsungdeveloperconference.com
Analytical/Performance Cookies
These cookies collect information about how you use our website. for example which
pages you visit most often. All information these cookies collect is used to improve
how the website works.
Company
Domain
LinkedIn
.linkedin.com
Meta (formerly Facebook)
.samsungdeveloperconference.com
Google Inc.
.samsungdeveloperconference.com
Functionality Cookies
These cookies allow our website to remember choices you make (such as your user name, language or the region your are in) and
tailor the website to provide enhanced features and content for you.
Company
Domain
LinkedIn
.ads.linkedin.com, .linkedin.com
Advertising Cookies
These cookies gather information about your browser habits. They remember that
you've visited our website and share this information with other organizations such
as advertisers.
Company
Domain
LinkedIn
.linkedin.com
Meta (formerly Facebook)
.samsungdeveloperconference.com
Google Inc.
.samsungdeveloperconference.com
Preferences Submitted
You have successfully updated your cookie preferences.