Cordova Volume Slider doesn’t work on mobile devices

Question

Cordova Volume Slider doesn’t work on mobile devices

I'm using the cordova media plugin together with the Ionic framework in order to control the volume of an audio slider.

HTML:

<div class="list list-inset" ng-controller="AudioCtrl">

    <div class="item item-divider">Audio</div>
    <div class="item">
        <audio src="media/audio.wav" preload="auto" controls id="audioSource">
            Your browser does not support the audio element.
        </audio>
    </div>

    <div class="item item-divider text-center">
        <h3>Current volume: {{ slider.volume }}</h3>
    </div>
    <div class="item range">
        <i class="icon ion-volume-low"></i>
        <input type="range" name="slider.volume" ng-model="slider.volume" ng-init="slider.volume=50" ng-click="setVolume()">
        <i class="icon ion-volume-high"></i>
    </div>

</div>

JS:

.controller('AudioCtrl', function($scope) {
    var audioSrc = document.getElementById("audioSource");
    audioSrc.volume = 0.5;
    $scope.setVolume = function() {
        audioSrc.volume = ($scope.slider.volume) / 100;
    }
})

This works in the browser but not on actual mobile devices, nothing happens there when I move the slider. I checked the official docs but I can't see why it isn't working. Of course I added all dependencies in the config files etc.

What am I doing wrong?

javascript
cordova
ionic-framework

Answer 1

Turns out that it was a problem with Angulars ng-click which simply doesn't work on input elements. Instead, use ng-change.

Change this:

<div class="item range">
    <input type="range" ng-click="setVolume()">
</div>

to this:

<div class="item range">
    <input type="range" ng-change="setVolume()">
</div>