locked
Getting Media info is too unpredictable

    Question

  • Hi all,

    I have an array of files that I loop through to get the media data, which is then used to create an element. The array contents are in perfect order, but by the time the media info is collected and the element created, the order is a little out.

    allFiles.forEach(function forEachTrack(rawTrack) {
    	trackNum++;
            var duration = "";
            var fileName = "";
    
            rawTrack.properties.getMusicPropertiesAsync().done(function (musicProperties) {
            	duration = musicProperties.duration;
                    fileName = musicProperties.title;
    
                    if (!fileName)
                   		fileName = rawTrack.name;
    
                    var trackName = "<span style='float:left; margin-left:10px;'>" + fileName + "</span>";
                    var trackLen = "<span style='float:right; margin-right:25px;'>" + toHHMMSS(duration) + "</span>";
                    var track = "<div class='track' id='" + trackNum + "'>" + trackName + trackLen + "</div>";
                    $(".playlist").append(track);
       });
    });

    So as you can see here - I loop through my array, get the media data from each file then use that data to create a track based on the data. I need the tracks to be created in the same order as they are fed into the foreach loop, but since getting the music properties is Async, it becomes unpredictable and the odd one becomes out of place - which isn't cool.

    Does anyone have any suggestions on how to overcome this? Do I need to change my approach all together, or is there another way to get the data I need?

    Many thanks!

    Thursday, December 04, 2014 11:06 PM

Answers

  • Hi Octodonk,

    Hope Kraig's blog help you: http://www.kraigbrockschmidt.com/2013/01/04/async-iteration-pattern-winjs-promises/

    --James


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    Friday, December 05, 2014 3:11 AM
    Moderator
  • Try something like this, I do not have enough media file on my environment, I use images instead, the code works fine here.

            function myFunction() {
                var picturesLibrary = Windows.Storage.KnownFolders.picturesLibrary;
    
                //  Get folder contents
                picturesLibrary.getFilesAsync().then(function (allFiles) {
                    trackNum = 0;
                    var fileName = "";
                    var storageItemsPromise = WinJS.Promise.as();
                    allFiles.forEach(function (item) {
                        storageItemsPromise = storageItemsPromise.then(function () {
                            item.properties.getImagePropertiesAsync().then(function (imageProperties) {
                                trackNum++;
                                //duration = imageProperties.duration;
                                fileName = imageProperties.title;
    
                                if (!fileName)
                                    fileName = item.name;
    
                                var trackName = "<span style='float:left; margin-left:10px;'>" + fileName + "</span>";
                                // var trackLen = "<span style='float:right; margin-right:25px;'>" + toHHMMSS(duration) + "</span>";
                                var track = "<div class='track' id='" + trackNum + "'>" + trackName + "</div>";
                                document.getElementById("playlist").appendChild(track);
                            });
    
                            // return item.CopyAsync(destination);
                        });
                    });
                });
            }

    --James


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    Tuesday, December 09, 2014 8:18 AM
    Moderator

All replies

  • Hi Octodonk,

    Hope Kraig's blog help you: http://www.kraigbrockschmidt.com/2013/01/04/async-iteration-pattern-winjs-promises/

    --James


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    Friday, December 05, 2014 3:11 AM
    Moderator
  • Thanks!

    However I've never done anything like that before, and can't quite grasp how it'll work in my situation. Able to give me a little push in the right direction?

    Cheerio!

    Friday, December 05, 2014 4:24 AM
  • Try something like this, I do not have enough media file on my environment, I use images instead, the code works fine here.

            function myFunction() {
                var picturesLibrary = Windows.Storage.KnownFolders.picturesLibrary;
    
                //  Get folder contents
                picturesLibrary.getFilesAsync().then(function (allFiles) {
                    trackNum = 0;
                    var fileName = "";
                    var storageItemsPromise = WinJS.Promise.as();
                    allFiles.forEach(function (item) {
                        storageItemsPromise = storageItemsPromise.then(function () {
                            item.properties.getImagePropertiesAsync().then(function (imageProperties) {
                                trackNum++;
                                //duration = imageProperties.duration;
                                fileName = imageProperties.title;
    
                                if (!fileName)
                                    fileName = item.name;
    
                                var trackName = "<span style='float:left; margin-left:10px;'>" + fileName + "</span>";
                                // var trackLen = "<span style='float:right; margin-right:25px;'>" + toHHMMSS(duration) + "</span>";
                                var track = "<div class='track' id='" + trackNum + "'>" + trackName + "</div>";
                                document.getElementById("playlist").appendChild(track);
                            });
    
                            // return item.CopyAsync(destination);
                        });
                    });
                });
            }

    --James


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    Tuesday, December 09, 2014 8:18 AM
    Moderator