How to transition between media clips (Windows Store apps using JavaScript and HTML) (Windows)

1 out of 1 rated this helpful - Rate this topic

This topic describes a way of ensuring smooth transitions between video or audio clips by having at least two media elements and alternating between them. The media tag in the foreground can play the current media stream, while the other tag can preload the next stream in the background.

If the media clips are part of a playlist, a Windows Store app will need to manage the playlist, parse the playlist, and pass each individual source to the video or audio tag for playback.

Switching to the Next Track

Here is an example script that alternates between media elements.

JavaScript



var audioPlayList = ['01.mp3', '02.mp3'];
var currentTrack = 0;
var trackBeingCued = false;

var currAudioTag;
var nextAudioTag;

function initTags() {
    currAudioTag = document.getElementById("audio1");
    nextAudioTag = document.getElementById("audio2");
    currAudioTag.addEventListener("ended", SwitchToNextTrack);
    nextAudioTag.addEventListener("ended", SwitchToNextTrack);
}


function CueNextTrack() {
    if (trackBeingCued) return;
    nextAudioTag.src = audioPlayList[(currentTrack + 1) % audioPlayList.length];
    trackBeingCued = true;
}

function SwitchToNextTrack() {
    initTags();
    trackBeingCued = false;
    var tmp = currAudioTag;
    currAudioTag = nextAudioTag;
    nextAudioTag = tmp;
    currAudioTag.play();
    currentTrack = currentTrack + 1;
    CueNextTrack();
}

Build date: 11/29/2012

Did you find this helpful? Yes No

Not accurate

Not enough depth

Need more code examples

(1500 characters remaining)