Audio Tracks are not playing when phone is on vibrate/silent

ionic-v1
1

I’m using ngAudio to control audio tracks (spotify 30 seconds previews) on an ionic app. It uses the Web Audio element. Most other libraries do the same. I tried the cordova audio plugin as well and it has the same problem.

It all works swell in the browser. However, in both ionic view and the actual demo app, the tracks will only stream when I have the phone vibrate toggle turned to not silent/ring mode. If it’s in vibrate mode, the user hears nothing. I’ve dug all over and can’t seem to solve this riddle. Why would the iphone only play the sound when the vibrate is turned off?

Anyway, I was assuming that I had got something wrong so I cloned a very popular demo app from a popular tutorial (the thinkster one). This app is called Songhop. I ran it in the ionic viewer and it does the same. The audio only works when the phone’s vibrate is turned off.

Like I said, this behavior is the same when I actually upload my app as an actual app to my phone using xcode. Sound only works when the vibrate/quiet mode is off. But all other iphone audio apps like bandcamp and soundcloud work fine when the phone is on vibrate.

What am I missing here?

Here’s my service:

.factory(‘PlayerService’, function(ngAudio) {

var _play = function(show) {
    if (typeof audioObject === "undefined") {

        audioObject = ngAudio.load(show.track1_preview);

        console.log(audioObject);

        audioObject.play();

        audioObject.playing = show.id;

        return audioObject;
    } else if (audioObject.paused) {
        audioObject = ngAudio.load(show.track1_preview);
        audioObject.play();

        audioObject.playing = show.id;

        return audioObject;

    } else {
        audioObject.stop();
        audioObject = ngAudio.load(show.track1_preview);
        audioObject.play();

        audioObject.playing = show.id;

        return audioObject;

    }


}

var _pause = function(show) {

    audioObject.stop();

    audioObject.playing = '';

}

return {
    play: _play,
    pause: _pause
};

Here’s the controller:

`$scope.playStream = function(show) {

    PlayerService.play(show);

    $scope.audioObject = audioObject; // this allow for styling the play/pause icons
}

$scope.pauseStream = function(show) {
    PlayerService.pause(show);
    $scope.audioObject = audioObject; // this allow for styling the play/pause icons

    //console.log($scope.audioObject);

}

$scope.togglePlayPause = function(show) {
    if (!$scope.audioObject || $scope.audioObject.paused) {
        $scope.playStream(show);
    } else if (show.track1_preview !== $scope.audioObject.id) {
        $scope.playStream(show);
    } else {
        $scope.pauseStream(show);
    }
}

Obviously, it’s a bit of a crap user experience if someone has to put the phone off vibrate to hear the tracks.

I’m wondering if this is related to asyncronous stuff and mobile. I just don’t know. Giving up after 4 hours of messing with it.