Skip to content

Commit 486c51b

Browse files
danielsterndanielstern
committed
added mouseover
1 parent 768d92d commit 486c51b

File tree

7 files changed

+66
-11
lines changed

7 files changed

+66
-11
lines changed

‎app/angular.audio.js‎

Lines changed: 22 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ angular.module('ngAudio', [])
1414

1515
var audio = ngAudio.load($attrs.ngAudio);
1616
$scope.$audio = audio;
17-
// audio.unbind();
17+
audio.unbind();
1818

1919
$element.on('click', function() {
2020
if ($scope.clickPlay === false) {
@@ -27,9 +27,27 @@ angular.module('ngAudio', [])
2727
audio.loop = $scope.loop;
2828
audio.currentTime = $scope.start || 0;
2929

30-
$timeout(function() {
31-
audio.play();
32-
}, 5);
30+
31+
});
32+
}
33+
};
34+
}])
35+
36+
.directive('ngAudioHover', ['$compile', '$q', 'ngAudio', function($compile, $q, ngAudio) {
37+
return {
38+
restrict: 'AEC',
39+
controller: function($scope, $attrs, $element, $timeout) {
40+
41+
var audio = ngAudio.load($attrs.ngAudioHover);
42+
43+
$element.on('mouseover rollover hover', function() {
44+
45+
audio.audio.play();
46+
47+
audio.volume = $attrs.volumeHover || audio.volume;
48+
audio.loop = $attrs.loop;
49+
audio.currentTime = $attrs.startHover || 0;
50+
3351
});
3452
}
3553
};

‎app/audio/button-2.mp3‎

8.45 KB
Binary file not shown.

‎app/audio/button-3.mp3‎

14.6 KB
Binary file not shown.

‎app/audio/button-4.mp3‎

9.47 KB
Binary file not shown.

‎app/index.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -26,13 +26,13 @@
2626
<div class="navbar navbar-default" role="navigation">
2727
<div class="container-fluid">
2828
<div class="navbar-header">
29-
<a ng-audio='audio/button-1.mp3' class="navbar-brand" ui-sref='home'>ngAudio</a>
29+
<a ng-audio='audio/button-2.mp3' ng-audio-hover='audio/button-4.mp3' volume-hover=0.2 class="navbar-brand" ui-sref='home'>ngAudio</a>
3030
</div>
3131
<div>
3232
<ul class="nav navbar-nav navbar-right">
33-
<li ng-audio='audio/button-1.mp3' ui-sref-active='active'><a ui-sref='docs'>Docs</a>
33+
<li ng-audio='audio/button-3.mp3' ng-audio-hover='audio/button-4.mp3' volume-hover=0.2 ui-sref-active='active'><a ui-sref='docs'>Docs</a>
3434
</li>
35-
<li ng-audio='audio/button-1.mp3' ui-sref-active='active'><a ui-sref='audio.detail({id:"audio|song.mp3"})'>Demo #1</a>
35+
<li ng-audio='audio/button-1.mp3' ng-audio-hover='audio/button-4.mp3' volume-hover=0.2 ui-sref-active='active'><a ui-sref='audio.detail({id:"audio|song1.mp3"})'>Demo #1</a>
3636
</li>
3737
<!-- <li class="dropdown">
3838
<a ui-sref='audio' ui-sref-active='active' class="dropdown-toggle" data-toggle="dropdown">Sounds <span class="caret"></span></a>
@@ -41,7 +41,7 @@
4141
</li>
4242
</ul>
4343
</li> -->
44-
<li ng-audio='audio/button-1.mp3'><a href='https://github.com/danielstern/ngAudio' target=_blank>Github</a>
44+
<li ng-audio='audio/button-2.mp3' ng-audio-hover='audio/button-4.mp3' volume-hover=0.2><a href='https://github.com/danielstern/ngAudio' target=_blank>Github</a>
4545
</li>
4646
</ul>
4747

‎app/partial/audioFullView.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22
<!-- <div ng-include='"partial/audioEditView.html"'></div> -->
33
<!-- <div ng-repeat="audio in audios"> -->
44
<ul class='nav nav-stacked nav-pills'>
5-
<li ng-repeat='audio in audios' ui-sref-active="active"><a ui-sref='audio.detail({id:audio.safeId})'>{{audio.id}}</a>
6-
</ul>
5+
<li ng-audio='audio/button-2.mp3' ng-audio-hover='audio/button-4.mp3' volume-hover=0.2 ng-repeat='audio in audios' ui-sref-active="active"><a ui-sref='audio.detail({id:audio.safeId})'>{{audio.id}}</a></li>
6+
</ul>
77
<!-- </div> -->
88
</div>
99
<!-- <div class='col-md-3 hidden-xs' ng-include="'partial/audioTableView.html'"></div> -->

‎app/partial/ngAudioDocs.html‎

Lines changed: 38 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -197,7 +197,7 @@ <h3>
197197
ngAudio Directive
198198
</h3>
199199
<p>
200-
<strong>ngAudio</strong>can be applied as a directive on any element to have it play a sound when clicked. Sounds are preloaded as soon as all other elements on the page are resolved.
200+
<strong>ngAudio</strong> can be applied as a directive on any element to have it play a sound when clicked. Sounds are preloaded as soon as all other elements on the page are resolved.
201201
</p>
202202
<code>
203203
<pre>&lt;button ng-audio=&quot;sounds/mySound.mp3&quot; volume=&quot;0.5&quot; start=&quot;0.2&quot;&gt;Click me&lt;/button&gt;</pre>
@@ -228,6 +228,43 @@ <h3>
228228

229229
</table>
230230
</article>
231+
232+
<article>
233+
<h3>
234+
ngAudioHover Directive
235+
</h3>
236+
<p>
237+
<strong>ngAudio-hover</strong> is like ngAudio but for hovering, and can be applied as a directive on any element to have it play a sound when it is hovered over. Sounds are preloaded as soon as all other elements on the page are resolved.
238+
</p>
239+
<code>
240+
<pre>&lt;button ng-audio-hover=&quot;sounds/mySound.mp3&quot; volume-hover=&quot;0.5&quot; start-hover=&quot;0.2&quot;&gt;Click me&lt;/button&gt;</pre>
241+
</code>
242+
243+
<table class="table table-striped table-bordered table-condensed">
244+
<tr>
245+
<td>ng-audio-hover</td>
246+
<td>
247+
<p>
248+
Takes a string and creates a new object with
249+
<strong>ngAudio.load()</strong>
250+
</p>
251+
</td>
252+
</tr>
253+
<tr>
254+
<td>volume-hover</td>
255+
<td>Specifies a volume for the sound to play.</td>
256+
</tr>
257+
<tr>
258+
<td>start-hover</td>
259+
<td>Specifies a start time for the sound.</td>
260+
</tr>
261+
<tr>
262+
<td>loop-hover</td>
263+
<td>Set a number to repeat a sound that many times, or true to repeat indefinitely.</td>
264+
</tr>
265+
266+
</table>
267+
</article>
231268
<article>
232269
<h3>
233270
Angular Audio Example

0 commit comments

Comments
 (0)