我只是创建一个指令以基于HTML5标签设置实时流式传输，但是我需要添加一个音量按钮，如何实现它？
看指令
var app = angular.module('app', []);
app.directive('audioPlay', function() {
return {
restrict: 'E',
link: function(scope, element, attr) {
scope.playOrPause = true;
var player = element.children('.player')[0];
scope.playMusic = function() {
scope.playOrPause = false;
player.play();
}
scope.stopMusic = function() {
scope.playOrPause = true;
player.pause();
}
}
};
});
这里是相应的html
<div ng-app='app'>
<audio-play>
<audio class="player">
<source src="http://fire.wavestreamer.com:9711/UrbanetRadio"/>
</audio>
<button class="button button-clear"
ng-click="playMusic()"
ng-hide="!playOrPause">
PLAY
</button>
<button class="button button-clear"
ng-click="stopMusic()"
ng-show="!playOrPause">
PAUSE
</button>
</audio-play>
</div>
我不想用controlsattr来实现基本的html5音频，我是自己做的，我需要的是音量按钮方面的帮助。
这是一些可能有用的代码。您可以input type="range"用作音量控制：
<input type="range" ng-model="volume" ng-change="changeVolume($event)" step="0.1" min="0" max="1">
并使用volume音频元素的属性更改声音级别：
scope.changeVolume = function(event) {
player.volume = scope.volume; // from 0 to 1
};
您也可以将输入的值绑定到模型，或者使用按钮而不是滑块-有很多变化，但是您知道了:)
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句