Question

我使用cordova媒体插件和Ionic框架来控制音频滑块的音量。

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;
    }
})

这适用于浏览器但不适用于实际的移动设备，当我移动滑块时没有任何反应。我查了the official docs，但我不明白为什么它不起作用。当然，我在配置文件等中添加了所有依赖项。

我做错了什么？

Answer 1

事实证明，Angulars ng-click的问题根本不适用于输入元素。相反，请使用ng-change。

改变这个：

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

到此：

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

Cordova Volume Slider无法在移动设备上运行

1 个答案: