This topic describes how your application can play audio content using the HTML5 "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 Samsung Smart TV. The audio element inherits all the properties and methods of the HTMLMediaElement interface.
audio
Samsung TVs 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:
<body> <audio id='audio' src='yourAudioURI' loop controls> </audio> </body>
autoplay
controls
loop
muted
preload
src
var audioElement = document.createElement('audio'); audioElement.src = 'yourAudioURI'; audioElement.loop = true; audioElement.controls = true; audioElement.load(); document.body.appendChild(audioElement);
audioTracks
buffered
currentTime
duration
ended
paused
volume
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:
addTextTrack()
canPlayType()
load()
source
pause()
play()
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;
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>
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
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);