创建使用HTML5音频元素
问题描述:
我是新与角AngularJS一个新的指令,我已经取得了音响按键采用了棱角分明的指令:创建使用HTML5音频元素
app.directive('soundButton', [function() {
return {
restrict: 'E',
link: function (scope, element, attrs) {
var audioSrc = attrs.origem;
var audio = new Audio(audioSrc);
scope.play = function() {
if (audio.paused) {
audio.play();
} else {
audio.pause();
}
};
element.css({
borderRadius: '50%',
width: '100px',
height: '100px',
backgroundColor: 'red',
display: 'inline-block'
});
}
}
}]);
...并把html代码我的网页上:
<section id="bla" data-ng-controller="Ctrl">
<sound-button data-ng-click="play()" origem="http://sampleswap.org/samples-ghost/DRUMS%20(FULL%20KITS)/sys100%20drumkit/24[kb]909-klick.aif.mp3" class="col-md-4"></sound-button>
<sound-button data-ng-click="play()" origem="http://sampleswap.org/samples-ghost/DRUMS%20(FULL%20KITS)/sys100%20drumkit/2[kb]hihat_closed.aif.mp3" class="col-md-4"></sound-button>
<sound-button data-ng-click="play()" origem="http://sampleswap.org/samples-ghost/DRUMS%20(FULL%20KITS)/sys100%20drumkit/34[kb]noicybell.aif.mp3" class="col-md-4"></sound-button>
</section>
但总是点击音频按钮,它会播放相同的声音。 (我怀疑这可能是问题的元件的阵列)
FIDDLERJS:http://jsfiddle.net/qumjmz9y/
答
你应该定义内源标签
app.directive('soundButton', [function() {
return {
restrict: 'E',
link: function (scope, element, attrs) {
var audioSrc = attrs.origem,
audio = angular.element('<audio/>'),
inner = angular.element('<source/>');
inner.attr('src', audioSrc);
audio.attr('autoplay', true);
audio.attr('control', false);
//audio.attr('loop', true);
element.append(audio);
audio.append(inner);
scope.play = function() {
if (audio[0].paused) {
audio[0].play();
} else {
audio[0].pause();
}
};
element.css({
borderRadius: '50%',
width: '100px',
height: '100px',
backgroundColor: 'red',
display: 'inline-block'
});
}
}
}]);
但是当我实例化新的音频对象这种情况下,我已经设置源:VAR音频=新的音频(源);或不? – 2014-11-24 13:10:29
http://jsfiddle.net/qumjmz9y/ – 2014-11-24 13:20:29
fiddle => [link](http://jsfiddle.net/qumjmz9y/2/) 你的错误是直接到达音频元素。如果(audio.paused){audio.play();}}。 } else { audio.pause(); } };' 链接函数中的音频元素指示最新的音频源。所以你必须以某种方式找到音频**并调用播放暂停功能。我使用_ $ event_作为您的播放函数调用的参数。 – 2014-11-24 16:33:34