DustinRW DustinRW - 2 months ago 14
Javascript Question

.play() not firing within directive using $watch

I am using buzz for my sound and very familiar with it's functionality. However, myself and mentor cannot figure out why my sound file is not firing within my directive.

My directive:

(function() {
function clockTimer($interval, $window, STOP_WATCH) {

return {
templateUrl: '/templates/directives/clock_timer.html',
replace: true,
restrict: 'E',
scope: {},
link: function(scope, element, attributes) {

scope.STOP_WATCH = STOP_WATCH; //see constants in app.js
scope.startButton = 'Start Work';
scope.breakButton = 'Take Break';
scope.onBreak = false; //boolean for alternating displaying of work-time or break
var mySound = new buzz.sound("/sounds/blue.mp3", {
formats: ['mp3'],
preload: true
});

// @desc initiates holder of completed work sessions. Increments by 1 once timer hits 0
var completedWorkSessions = 0;
// @desc Holds state for $interval call
var promise;

scope.$watch('STOP_WATCH.totalWorkTime', function() {
if (scope.STOP_WATCH.totalWorkTime === 0) {
mySound.play();
console.log(mySound);
console.log("im listening");
}
});


My VIEW

<section class="clock-container">
<div ng-show="!onBreak === true"> {{ STOP_WATCH.totalWorkTime | clockFormat }}
<button ng-click="startStopButton(startButton)" ng-show="!onBreak === true">{{ startButton }}</button>
</div>
<div ng-hide="onBreak === false"> {{ STOP_WATCH.totalBreakTime | clockFormat }}
<button ng-click="takeBreakButton(breakButton)">{{ breakButton }}</button>
</div>
</section>


Buzz library is included within my index, I've tried adding
scope
to the beginning of
mySound
, tested the .mp3 within a test application (which worked fine), and still cannot get the sound to play.

Here is my console which demonstrates that
$watch
is firing when its suppose to:

sound {sound: audio, volume: 80}
clockTimer.js:51 im listening


Any ideas or solutions? I don't have any controllers and think I shouldn't need one since its firing successfully in the console?

Answer

I removed formats: ['mp3'], from the buzz Object. You can either use formats: ['mp3'], or .mp3, but not both.