Cordova Volume Slider doesn't work on mobile devices

ionic-v1
1

I’m using the cordova media plugin 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 added all dependencies in the config files etc.

What am I doing wrong?

EDIT: According to this link, what could I change? I can’t see why it does not work. Any help is appreciated!

2

Could someone at least give me a hint about what I’m doing wrong? :wink:
Thanks!

3

To anyone who might be interested: my mistake was using ng-click on the input element, which doesn’t work. You have to use ng-change instead.

So this:

<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>

becomes this:

<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-change="setVolume()">
    <i class="icon ion-volume-high"></i>
</div>
4

It didn’t work for me. do you have an solution example?
thanks