locked
poor quality audio playback in javascript windows store app

    Question

  • I'm programming a Windows Store app using javascript and having trouble playing audio without poor quality. Usually when a sound plays it sounds as if it is skipping the first few hundred milliseconds of the sound (and sometimes more), resulting in clicks and sometimes almost no sound (because the sound files are short). I have 8 short files (27kb .mp3). The weirdest thing is that the volume of the playback also seems to randomly vary between a quiet and loud level. I'm using a Windows 8.1 tablet with a 1.6GHz processor. There is almost nothing else going on in the app. Suggestions much appreciated.

    //I declare like this:
    var playList = new Array("chord1.mp3", "chord2.mp3", "chord3.mp3", "chord4.mp3", "chord5.mp3", "chord6.mp3", "chord7.mp3", "chord8.mp3" );
    var playListIndex = 0;
    var players = new Array();
    
    //I initialise like this:
            for (var i = 0; i < playList.length; i++) {
                players[i] = new Audio();
                players[i].src = playList[i];
            }
    
    //When it's time to play (listening for pointerdown events) I do this:           
            players[playListIndex].play();
    
    //I have tried this but it just introduces latency without solving the problem
            //new Audio(playList[playListIndex]).play();
    
    //This happens after playing to make the sounds play sequentially.
    //The problems occur even when there is no overlap of playback
            playListIndex++;
            if (playListIndex >= playList.length) {
                playListIndex = 0;
            }

    Thursday, March 27, 2014 8:42 PM

Answers

  • Hi Ben,

    I tried to reproduce your issue but unfortunately I have not been able to repro it on my desktop. The only odd thing I noticed in your JavaScript is that you are not waiting for your UI to be loaded before you add the event listener to the body and start adding the audio to the list.

    Can you try by waiting for the processAll() to complete before you add any event handlers...by using this code approach and see if it changes your repro?

            if (args.detail.kind === activation.ActivationKind.launch) {
                args.setPromise(WinJS.UI.processAll().done(function () {
                    wholeScreen = document.getElementById("wholeScreen");
                    wholeScreen.addEventListener("pointerdown", onPointerDown, false);
                    wholeScreen.addEventListener("pointerup", onPointerup, false);
                    wholeScreen.style.backgroundImage = "url(images/crosses.png)";
    
                    for (var i = 0; i < playList.length; i++) {
                        players[i] = new Audio();
                        players[i].src = playList[i];
                        players[i].load();
                    }
                }));


    Windows Store Developer Solutions, follow us on Twitter: @WSDevSol|| Want more solutions? See our blog

    • Marked as answer by Anne Jing Friday, April 4, 2014 8:09 AM
    • Unmarked as answer by Anne Jing Friday, April 4, 2014 8:10 AM
    • Marked as answer by Anne Jing Tuesday, April 8, 2014 1:43 AM
    Thursday, April 3, 2014 6:08 PM
    Moderator

All replies

  • Does your code have the .load() function before calling .play() ?

    Windows Store Developer Solutions, follow us on Twitter: @WSDevSol|| Want more solutions? See our blog

    Thursday, March 27, 2014 11:32 PM
    Moderator
  • Thanks for the suggestion. The code did not include .load() but I now tried including it, in the loop where the Audio objects are initialised, and it did not solve the problem.

    Cheers,

    Ben

    Friday, March 28, 2014 4:36 PM
  • Can you share your sample repro project via OneDrive or any other file sharing mechanisms including your audio files? That will help understand your repro much better...

    Windows Store Developer Solutions, follow us on Twitter: @WSDevSol|| Want more solutions? See our blog

    Friday, March 28, 2014 4:56 PM
    Moderator
  • I surely will when I am back at work next week, thanks a lot for the offer of help.
    Friday, March 28, 2014 8:10 PM
  • Hi!

    I would very much appreciate if anyone can replicate and/or solve my problem!

    I have uploaded the default.js file and the default.html file and the collection of .mp3 files and one .png file necessary for the project:

    https://www.dropbox.com/sh/pikz2rmaac6g8wa/lgFsATJQ4q

    All you need to do is start a new blank project for a Javascript Windows Store App, copy in the .js and .html files, and make sure the .mp3 and .png files are accessible to the project.

    The .js file is so short and simple that I can include the whole thing here. Please do let me know if you can see why this problems are happening!

    Cheers.

    // For an introduction to the Blank template, see the following documentation:
    // http://go.microsoft.com/fwlink/?LinkId=232509
    (function () {
        "use strict";
    
        var app = WinJS.Application;
        var activation = Windows.ApplicationModel.Activation;
        var touchCount = 0;
        var currentDown = 0;
        var wholeScreen;
        var playList = new Array("chord1.mp3", "chord2.mp3", "chord3.mp3", "chord4.mp3", "chord5.mp3", "chord6.mp3", "chord7.mp3", "chord8.mp3" );
        var playListIndex = 0;
        var players = new Array();
    
        app.onactivated = function (args) {
            if (args.detail.kind === activation.ActivationKind.launch) {
                args.setPromise(WinJS.UI.processAll());
    
                wholeScreen = document.getElementById("wholeScreen");
                wholeScreen.addEventListener("pointerdown", onPointerDown, false);
                wholeScreen.addEventListener("pointerup", onPointerup, false);
                wholeScreen.style.backgroundImage = "url(images/crosses.png)";
    
                for (var i = 0; i < playList.length; i++) {
                    players[i] = new Audio();
                    players[i].src = playList[i];
                    players[i].load();
                }
            }
        };
    
        function onPointerDown() {
            currentDown++;
            
            if (currentDown === 1 ) {
                players[playListIndex].play();
                playListIndex++;
                if (playListIndex >= playList.length) {
                    playListIndex = 0;
                }
            }        
        }
    
        function onPointerup() {
            currentDown--;
        }
    
        app.start();
    })();
    

    Thursday, April 3, 2014 3:53 PM
  • Hi Ben,

    I tried to reproduce your issue but unfortunately I have not been able to repro it on my desktop. The only odd thing I noticed in your JavaScript is that you are not waiting for your UI to be loaded before you add the event listener to the body and start adding the audio to the list.

    Can you try by waiting for the processAll() to complete before you add any event handlers...by using this code approach and see if it changes your repro?

            if (args.detail.kind === activation.ActivationKind.launch) {
                args.setPromise(WinJS.UI.processAll().done(function () {
                    wholeScreen = document.getElementById("wholeScreen");
                    wholeScreen.addEventListener("pointerdown", onPointerDown, false);
                    wholeScreen.addEventListener("pointerup", onPointerup, false);
                    wholeScreen.style.backgroundImage = "url(images/crosses.png)";
    
                    for (var i = 0; i < playList.length; i++) {
                        players[i] = new Audio();
                        players[i].src = playList[i];
                        players[i].load();
                    }
                }));


    Windows Store Developer Solutions, follow us on Twitter: @WSDevSol|| Want more solutions? See our blog

    • Marked as answer by Anne Jing Friday, April 4, 2014 8:09 AM
    • Unmarked as answer by Anne Jing Friday, April 4, 2014 8:10 AM
    • Marked as answer by Anne Jing Tuesday, April 8, 2014 1:43 AM
    Thursday, April 3, 2014 6:08 PM
    Moderator
  • Hi!
    Many thanks for trying to help me. I'm sorry not to reply quickly when you are helping so quickly. I just wanted to report that I have implemented this change too and it did not solve the problem. I guess then that this is something hardware specific. Somehow this device cannot handle this code. I cannot understand why. The requirements are not demanding and the device is as I understand it fairly powerful. It is one of these:
    I am on the verge of giving up and implementing this on an ipad instead...
    Cheers,
    Ben
    Friday, April 11, 2014 2:14 PM