EzDevInfo.com

HTML5 audio libraries

There are a number of JavaScript libraries available for HTML5 audio, to either make a developer's life easier, ensure cross-browser compatibility or support Flash fallback for older browsers.

I haven't found much in terms of comparatives, except maybe for this article, on a small scale.

Which of the following libraries come recommended and for what purposes? What can I expect in terms of documentation and support (eg: is that library likely here to stay?)

• Audio5JS
• Buzz
• HowlerJS
• jPlayer
• MediaElementJS
• SoundJS
• SoundManager2

I don't need UI features for my needs and would rather keep things small and simple. That would seem to make Audio5JS a candidate of choice. However I'm wondering if that's a smart choice simply because it doesn't seem to have as big a community as, say, jPlayer.

EDIT: I simply need to play an audio file (in full and/or parts of it) based on user input and the ability to loop that for a given file (ie: loop the file itself or loop a part of it.)

General guidelines on how to pick a JS library to get a job done will also be welcome.

I mainly wanna save myself the need to try out all those libraries (and more) to figureout their pro's and con's.

Thank you.

How to play mp3 playlists with SoundManager using the controls

I am trying to play multiple audio files using SoundManager2 and so far this is the only working example I could find of the site.

<script src="/path/to/soundmanager2.js"></script>
<script>
soundManager.setup({
  url: '/path/to/swf-files/',
  onready: function() {
    var mySound = soundManager.createSound({
      id: 'aSound',
      url: '/path/to/example.mp3'
    });
    mySound.play();
  },
  ontimeout: function() {
    // Hrmm, SM2 could not start. Missing SWF? Flash blocked? Show an error, etc.?
  }
});
</script>

Even though, I can play example.mp3 with the above example, I would like to use the playlist as shown in this example. Sadly, that page does not mention anything about how to implement the playlist feature.

I currently have a Json that returns the mp3 paths for a given song artist, like this:

{
  "john_doe":"/path/to/audio/john_doe.mp3",
  "jane_smith":"/path/to/audio/jane_smith.mp3",
}

So, how can I incorporate this json data to make a playlist of, for example 2 songs.

Skins / Themes for Soundmanager 2

I am currently considering to use Soundmanager2 as an audio player for a small project. I like SM2 a lot, but unfortunately I can't find an implementation that provides an inline player with basic controls (play, pause, progress bar, time, volume control).

The only thing I found is the basic player.

Does anyone of you know a way to use Soundmanager2 with a classic control interface (like this)?

Soundcloud API / SoundManager2 SetPosition not working before track is playing

I am trying to set the position of a sample in SoundCloud using setPosition to play from a certain time when I call the play() method. I need to set this before the sample starts playing. Right now this code isn't working:

SC.whenStreamingReady(function() {
            var sound = SC.stream("/tracks/141543551");
            sound.play();
            sound.setPosition(300);
        });

However, when I call setPosition while the sample is playing it works just fine.

SC.whenStreamingReady(function() {
                setTimeout(function () {

                sound.pause();

                var positionCallback = function (eventPosition) {
                    this.clearOnPosition(0, positionCallback);
                    this.resume();
                };
                sound.onPosition(0, positionCallback);
                sound.setPosition(30000);


                sound.play();

 }, 5000);

    });

How can I setPosition() before the sample plays?

Setup web audio api source node from soundcloud

I would like to know if there is any way to create a source node ( https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html#MediaElementAudioSourceNode) from a soundcloud track.

I'm ok with the web audio API, but new to the soundcloud sdk, as far I understand it relies on soundmanager2. So maybe there is some options from soundmanager2 available?

Regards

How to start sound after sound in soundmanager2

How can i start sound after sound in soundmanager2, i mean when the first sound ends, second sound to start and when the second end the third start and etc and etc..

Web Audio Mobile Safari Lock Screen Controls

I have a web audio player that uses Soundmanager2. Right now play/pause work on the lock screen and prev/next do not work. I worked on iOS 7 but I couldn't figure out why.

I see lots of talk about setting the track image and player controls in a native app, but not in an audio web app. That said I'd like to know why it quit working in iOS8 and what I can do to add a track image?

Update: Controls do not work in iOS 8, only on iOS7.

Lags while playing 2 sounds on the same time in timer

I have a small app that basically sets up a timer and plays sets of 2 sounds one after another.

I've tried 2 timers, because I wanted both sounds to start exactly at the same time each time. I gave the app 500ms for setting both timers before they start

    Calendar cal = Calendar.getInstance();
    Date start = new Date(cal.getTime().getTime() + 500);

    timerTask1 = new TimerTask() { //1st timer
      @Override
      public void run() {
          soundManager.playSound(1);
      }
    };
    timer1 = new Timer();
    timer1.schedule(timerTask1, start, 550);


    timerTask2 = new TimerTask() { //2nd timer
      @Override
      public void run() {
          soundManager.playSound(2);
      }
    };
    timer2 = new Timer();
    timer2.schedule(timerTask2, start, 550);
}

soundManager is a SoundManager object which is based on this tutorial. Thew only change I've made was decreasing number of avalible streams from 20 to 2 since I play only 2 sounds at the same time.

Now the problem. It's not playing at the equal rate neither on my Motorola RAZR or the emulator. The app slows sometimes, making a longer brake than desired. I can't let that happen. What could be wrong here?

I'm using very short sounds in OGG format

EDIT: I've made some research. Used 2 aproaches. I was measuring milisecond distances between sound was fired. Refresh rate was 500 ms.

• 1st aproach was TimerTask - it is a big fail. It started at 300ms, then was constantly growing, and after some time (2 mins) stabilized at 497ms which would be just fine if it started as that.
• 2nd aproach was while loop on AsyncTask - it was giving me outputs from 475 to 500ms which is better than TimerTask but still inaccurate

At the end none of aproach was playing smoothly. There were always lags

Cors Html5 Jquery/SoundManager wierdness

So I am having some issues with the soundcloud api and html 5 audio player.

The main goal is to access all of the publicly available soundcloud tunes using only html5.

I am using the following.

    //C# api call returning json object. Cut down version of the code as it isnt the issue.
    var method "http://api.soundcloud.com/users/{0}/favorites.json"
    var query = "?client_id=" + soundCloudClientId;

    WebClient client = new WebClient();

    return client.DownloadString(string.Format(method, artistId) + query);

I'm getting back this from soundcloud. Cut down again for some relevant test cases

    {
        "Songs": 
        [
            {
                "Title": "Rio",
                "Artist": "Netsky",
                "Album": "",
                "Duration": "03:49",
                "Artwork": "https://i1.sndcdn.com/artworks-000120037955-m8t78n-t500x500.jpg",
                "StreamUrl": "https://api.soundcloud.com/tracks/210032350/stream",
                "Libary": "SoundCloud",
                "TrackId": "210032350"
            },
            {
                "Title": "FreqAsia x Nasty Wizard - Episode 01",
                "Artist": "Frequency Asia",
                "Album": "",
                "Duration": "17:50",
                "Artwork": "https://i1.sndcdn.com/artworks-000120265160-sn1a4k-t500x500.jpg",
                "StreamUrl": "https://api.soundcloud.com/tracks/210368447/stream",
                "Libary": "SoundCloud",
                "TrackId": "210368447"
            },
            {
                "Title": "Episode 023 - June 2015",
                "Artist": "Frequency Asia",
                "Album": "",
                "Duration": "44:15",
                "Artwork": "https://i1.sndcdn.com/artworks-000120689935-24wvqo-t500x500.jpg",
                "StreamUrl": "https://api.soundcloud.com/tracks/210995770/stream",
                "Libary": "SoundCloud",
                "TrackId": "210995770"
            },
            {
                "Title": "Porter Robinson - Flicker",
                "Artist": "Porter Robinson",
                "Album": "",
                "Duration": "04:39",
                "Artwork": "https://i1.sndcdn.com/artworks-000086441918-ds0915-t500x500.jpg",
                "StreamUrl": "https://api.soundcloud.com/tracks/160632928/stream",
                "Libary": "SoundCloud",
                "TrackId": "160632928"
            }
        ]
    }

This gets called via ajax on my page and then with the results I render out a bunch of html on the page with bindings to onclick function that looks like this.

    $.ajax({
        url: 'http://api.soundcloud.com/tracks/' +
             widget.get("TrackId") +
            '/streams?' +
            'client_id=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx' +
            '&format=json&_status_code_map[302]=200',
        dataType: 'json',
        method: "GET",
        success: function (resp) {
            $("#myAudio").attr("src", resp.http_mp3_128_url);
            $("#myAudio")[0].play();
        },
        error: function (req, status, err) {
            console.log('something went wrong', status, err);
        }
    });

Where $("#myAudio") is equal to

    <audio id="myAudio"
       src=""
       crossorigin="anonymous"
       type="audio/mpeg"
       controls="controls"
       style="width: 100%">
        Your user agent does not support the HTML5 Audio element. Woof..
    </audio>

Now this works for about half of my songs. It works for Rio - NetSky - 210032350. However for Porter Robinson - Flicker - It Does not. I get thrown the following error:

    Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://cf-media.sndcdn.com/nwtEnjuJwESE.128.mp3?Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiKjovL2NmLW1lZGlhLnNuZGNkbi5jb20vbnd0RW5qdUp3RVNFLjEyOC5tcDMiLCJDb25kaXRpb24iOnsiRGF0ZUxlc3NUaGFuIjp7IkFXUzpFcG9jaFRpbWUiOjE0MzY4NDc2NDV9fX1dfQ__&Signature=JN5bWI9dRW6a-KAczl0tjeTdoKmSa5BS8eGdI3I9E~NX9N~L-E9M2LRuCSuOc0jN0vk53VodFvwtArHfnFpedZjlo-7fmRwKMcZd5LAkGvCww0OiAztuzk4GESmLF8zE8RhKOF5UlNCJNLPZYM2BLgZPuMzsfLeQSLGPDbCHkiJazXZYoPjWKS8x3AYq4IBuwrzHsDOPT3GJN0XU89ugCm8x-cEZX946udYeRNrTwVUsVpTGjXwBE8zxRIE8AZFssptJsb9rCDpq9AlSoVBmII7RqYC264R9eovCqH8OTHGrQaeCQ9sXncwckjLpa70bjouCT-1UV6ampEIs9wTaKQ__&Key-Pair-Id=APKAJAGZ7VMH2PFPW6UQ. (Reason: CORS header 'Access-Control-Allow-Origin' missing).

As a weird quirk if I remove crossorigin="anonymous" from my page (manually in firbug) after I have changed the src it plays the song(Correctly). Even wierder is that after that all of the songs play but with no sound >:S.

Removing crossorigin="anonymous" from the beginning has no effect.

However if I use the soundmanager approach it seems to work fine.

    SC.stream(
        "/tracks/" + widget.get("TrackId"),
        {
            useHTML5Audio: true,
            multiShotEvents: true
        },
        function (sound) {
            // This is Pure Evil
            $("#myAudio").remove();
            sound.play();
            var newPlayer = $(sound._player._html5Audio);

            newPlayer.attr('id', "myAudio");
            newPlayer.attr('type', "audio/mpeg");
            //newPlayer.attr('crossorigin', "anonymous");
            newPlayer.attr('controls', "controls");
            newPlayer.attr('style', "width: 100%");

            $('#AudioPlayerContainer').append(newPlayer);

            audio = $("#myAudio");
            audio[0].play()
        }
    );

Now back to the core of the issue.

Both the html5 method and the Sound Manager method hit the following url with a get request.

    https://cf-media.sndcdn.com/nwtEnjuJwESE.128.mp3?Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiKjovL2NmLW1lZGlhLnNuZGNkbi5jb20vbnd0RW5qdUp3RVNFLjEyOC5tcDMiLCJDb25kaXRpb24iOnsiRGF0ZUxlc3NUaGFuIjp7IkFXUzpFcG9jaFRpbWUiOjE0MzY4NDc3MDl9fX1dfQ__&Signature=w9wbiSg6eYJd6LESarJl4hbTNPwEMa0tV8q1rC30E~b5UcicVw~mkR6RfMaY4pYSE489nNFjXUTTPUYJ-2T6BHnarxBl8YcRsmAsRbp3BzI6AlkutzqV4LOTma0r08WA9CpuMRJRyOnfwA271sQeYz~FkKadkTs1zKTyBbKc~WxAQvqkfwXimYpAynWmGuw7mFc-AEXEQ9wwPDBj6EJD5R1NtvBPia-jtJEdfO39I4BIwGGLeu57xIQk0GcYWhJ2rEspmfDh~Z99dKW0H5tGNC3UyVGG7cb-PKiyVOkIdKRz3paqZ6~Xu65nMC5EVD1dc7T8~sYTLsUVJkNu~aySuw__&Key-Pair-Id=APKAJAGZ7VMH2PFPW6UQ

Html5 Request and Response headers

    Host: cf-media.sndcdn.com
    User-Agent: Mozilla/5.0 (Windows NT 6.3; WOW64; rv:41.0) Gecko/20100101 Firefox/41.0
    Accept: audio/webm,audio/ogg,audio/wav,audio/*;q=0.9,application/ogg;q=0.7,video/*;q=0.6,*/*;q=0.5
    Accept-Language: en-US,en;q=0.5
    Origin: http://localhost:58434
    Range: bytes=0-
    Referer: http://localhost:58434/Home/Main
    Connection: keep-alive

    Accept-Ranges: bytes
    Age: 361541
    Cache-Control: max-age=252460800
    Connection: keep-alive
    Content-Length: 4465057
    Content-Range: bytes 0-4465056/4465057
    Content-Type: audio/mpeg
    Date: Thu, 09 Jul 2015 23:49:29 GMT
    Etag: "b46b442c81cdb2d253827a19291d2847"
    Last-Modified: Mon, 28 Jul 2014 11:56:24 GMT
    Server: AmazonS3
    Via: 1.1 5c5638d5b5fb0e5b90e36788792360f2.cloudfront.net (CloudFront)
    X-Amz-Cf-Id: sSqydrdg2dAC7O1q3vUszcSKjd-qPAvtMbwijwwKF_MBZ3m1yHazcA==
    X-Cache: Hit from cloudfront
    x-amz-meta-bitrate: 128
    x-amz-meta-duration: 279091
    x-amz-meta-job: nwtEnjuJwESE
    x-amz-version-id: RAqXwDop3vD2oYiHSW6PYUPyzsiuGp6H

Sound Manager Request and Response headers

    Host: cf-media.sndcdn.com
    User-Agent: Mozilla/5.0 (Windows NT 6.3; WOW64; rv:41.0) Gecko/20100101 Firefox/41.0
    Accept: audio/webm,audio/ogg,audio/wav,audio/*;q=0.9,application/ogg;q=0.7,video/*;q=0.6,*/*;q=0.5
    Accept-Language: en-US,en;q=0.5
    Range: bytes=0-
    Referer: http://localhost:58434/Home/Main
    Connection: keep-alive

    Accept-Ranges: bytes
    Age: 361891
    Cache-Control: max-age=252460800
    Connection: keep-alive
    Content-Length: 4465057
    Content-Range: bytes 0-4465056/4465057
    Content-Type: audio/mpeg
    Date: Thu, 09 Jul 2015 23:49:29 GMT
    Etag: "b46b442c81cdb2d253827a19291d2847"
    Last-Modified: Mon, 28 Jul 2014 11:56:24 GMT
    Server: AmazonS3
    Via: 1.1 b93cfa23ea94b492bc1948ec35e51f94.cloudfront.net (CloudFront)
    X-Amz-Cf-Id: 6KjUx89xvaKdOIvl-7IcrnNhhhnCVr2Fk_1Co-S4vt4KdytC6GfJDg==
    X-Cache: Hit from cloudfront
    x-amz-meta-bitrate: 128
    x-amz-meta-duration: 279091
    x-amz-meta-job: nwtEnjuJwESE
    x-amz-version-id: RAqXwDop3vD2oYiHSW6PYUPyzsiuGp6H

Note that Origin: exists in the first request and not the second. Now I have tried fiddling with. How to make an AJAX-request look like a regular, normal request.

To get rid of the header but to no avail.

So to the actual question how do get cross origin requests to function correctly like they do in the sound manager? / is there something obvious that i missing that is causing this.

____ Json P Attempt as per comments ____

    $(document).ready(function () {
        $.ajax({
            url: 'https://cf-media.sndcdn.com/nwtEnjuJwESE.128.mp3?Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiKjovL2NmLW1lZGlhLnNuZGNkbi5jb20vbnd0RW5qdUp3RVNFLjEyOC5tcDMiLCJDb25kaXRpb24iOnsiRGF0ZUxlc3NUaGFuIjp7IkFXUzpFcG9jaFRpbWUiOjE0MzY5MjUxNDl9fX1dfQ__&Signature=bd0d9hCWuXTWtdkHMVJEAYMjOyT31G1nAt9Ak3A1kKHGvNu~Ix5SqJ75OHr~R1MlfaVX3scQoqu8LSTfRdZUgOKnzRVYUpZAIKBKC-vcmdy1LNW9ounvZDdgMU6o9th4wiO2fx3HEu~UDmrypW6SgmrHWt0Smp3S8l0ypt80iKESRJHdRYI6Y~dewta~f3CGe7Om8EfzO8ZDwieGVP2sxmrYCf6rnSNKwXtcH1OXmPdkcKEJiCrxNzL8xFfNI8ONXjHm6Vj05EFc6dYOEAIxvhMR6A~uqex7tytxFocrX9C0dCL~ND-89K7oSkWgBT28WgQ8fMySx7HTTHbc3gwd4A__&Key-Pair-Id=APKAJAGZ7VMH2PFPW6UQ',
            dataType: 'jsonp',
            async: false,
            success: function (data) {
                $('#myAudio').attr("src","data:audio/mp4;base64,"+data);
                    $('#myAudio')[0].mAudioPlayer.load();
                    $('#myAudio')[0].mAudioPlayer.play();
            }
        });
    });

how to get a stream from a simple soundcloud URL?

I am using Javascript to create yet another custom player for SoundCloud and SoundManager2.

I am able to play a stream from a URI like api.soundcloud.com/tracks/1928712958, but I would like to use a Soundcloud url (like http://soundcloud.com/damianmarley/skrillex-damian-marley-make-it) as the input.

How can I do it?

SoundManager2 and require.js

SoundManager2 flash component need a specific global JavaScript variable (soundManager) to be present in global scope. This way flash player communicates with SoundManager2 JavaScript API.

The problem is that when you want to build you web application using AMD (require.js) you have to make a compromise and let this global variable to be present.

Is there any way to not break the AMD way of constructing application including SoundManager?

SoundManager2 has irregular latency

I'm playing some notes at regular intervals. Each one is delayed by a random number of milliseconds, creating a jarring irregular effect. How do I fix it?

Note: I'm OK with some latency, just as long as it's consistent.

Answers of the type "implement your own small SoundManager2 replacement, optimized for timing-sensitive playback" are OK, if you know how to do that :) but I'm trying to avoid rewriting my whole app in Flash for now.

For an example of app with zero audible latency see the flash-based ToneMatrix.

Testcase (see it here live or get it in an zip):

<head>
<title></title>
<script type="text/javascript" 
src="http://www.schillmania.com/projects/soundmanager2/script/soundmanager2.js">
</script>
<script type="text/javascript">
soundManager.url = '.'
soundManager.flashVersion = 9
soundManager.useHighPerformance = true
soundManager.useFastPolling = true
soundManager.autoLoad = true

function recur(func, delay) {
    window.setTimeout(function() { recur(func, delay); func(); }, delay)
}

soundManager.onload = function() {
    var sound = soundManager.createSound("test", "test.mp3")
    recur(function() { sound.play() }, 300)
}
</script>
</head>
<body>
</body>
</html>

Javascript: Soundmanager2 and Soundcloud event callback

I'm trying to build my own soundcloud media player, using the options provided by both SoundManager2 and Soundcloud.

Here is my current code:

SC.stream('/tracks/' + this.media.mediaId, function(audio){
            audio.load({
                onload : function(){
                    var duration = this.duration;

                },
                onfinish : function(){
                    self.updatePlayButton();
                    console.log('Finished');
                },
                onresume : function(){
                    self.updatePlayButton();
                    console.log("resumed");
                },
                onstop : function(){
                    self.updatePlayButton();
                    console.log("Stopped");
                },
                onpause : function() {
                    self.updatePlayButton();
                    console.log('Paused');
                },
                whileplaying : function()
                {
                    console.log(this.position);
                    self.updateScrubber(this.position / (this.duration / 100));
                    self.$timeLeft.text(self.formatTime(this.position / 1000));
                    console.log(totalPercent,'My position');
                }

            });
            self.audio = audio.sID;
            self.registerEvents();
        });

I play the audio using:

soundManager.getSoundById(self.audio).togglePause();

The audio play's, and all the callbacks are fired accordingly. But after the "onfinish" callback, when I hit play again it will replay the audio, but it wont fire any of the events.

What did I do wrong?

SoundManager2 - using RTMP not displaying duration

I'm using SoundManager2 to stream mp3 audio via RTMP. The problem is that the duration is not being generated and is always 0

var sound = soundManager.createSound({
            id: 'soundid',
            serverURL: 'rtmp://server/',
            url: 'file.mp3',
            autoLoad: true,
            autoPlay: false,
            onload: function() {
                console.log("DURATION: ", this.duration);
            },
            whileplaying: function() {
                console.log(this.duration);
            },
            volume: 100
        }).play();

Is getting the duration possible using RTMP? I've tried durationEstimate as well and this also displays 0.

SoundManager2 with iOS - Doesn't play sound onClick event

I'm trying to make a sound play on a "onClick" event using SoundManager2. Everything is working fine with IE, Chrome and FireFox. But when trying on an iPad or an iPhone, the sound doesn't play.

Here's (part) my JS code:

<script type="text/javascript">
    soundManager.debugMode = false;
    soundManager.url = 'soundmanager2.swf';
    soundManager.onload = function() {
        soundManager.createSound({
            id:'car',
            url:'audio/car.mp3',
            useHTML5Audio: true,
            preferFlash: false
        });
</script>

Here's (part) my HTML code:

<area shape='polygon'   coords='74,164,203,96,397,161,385,236,286,237,259,290,167,288,166,237,77,233' 
    onclick="soundManager.play('car')">