How to play a sound in angularjs

Question

Using an API to obtain the url of the sound to play in audio tag
View

<img src="../img/play.svg" alt="Play" ng-click="playSound('exampleWord')" width="48"/>

Controller:

$scope.playSound=function(input){
    $scope.audio={};
    soundFetch.getSound(input).success(function(data){
        $scope.audio=data;
    });
}

The soundFetch is the service to call the getSound function. The returning data is the url of the song. How can I play the sound after clicking the img tag. Currently getting an error Error: [$interpolate:interr]

`ng-click="playSound(word)"` remove `{{xx}}` from `{{word}}` — PSL, Jun 17 '15 at 02:03
@PSL I have taken any word, even after that it`s not working. — Akansh, Jun 17 '15 at 02:11
there are a good answer here: http://stackoverflow.com/questions/23659395/can-i-use-angular-variables-as-the-source-of-an-audio-tag Hope, this will help you. — Kirill Husiatyn, Nov 13 '15 at 13:36

score 32 · Accepted Answer · answered Aug 17 '16 at 16:54

32

    $scope.playAudio = function() {
        var audio = new Audio('audio/song.mp3');
        audio.play();
    };

answered Aug 17 '16 at 16:54

Rejneesh

1,574
16
16

score 1 · Answer 2 · answered Mar 20 '17 at 06:59

1

var playSound = function(mp3File){
  var audioElement = document.createElement('audio');
  audioElement.setAttribute('src', "/sound/"+mp3File);
  audioElement.play();
}

answered Mar 20 '17 at 06:59

user3871424

244
4
4

score 0 · Answer 3 · answered Aug 16 '16 at 09:44

0

It seems playSound function takes input as argument

I'd try

ng-click="playSound(this)" or in the case of button

ng-click="playSound(document.getElementById('audio'))"

answered Aug 16 '16 at 09:44

Jacek Pietal

1,980
1
18
27

score 0 · Answer 4 · answered Jan 16 '20 at 13:24

  var audioFile = new Audio($scope.audioUrl); 
            audioFile.play();  //we can not get metadata until audio is fetched
            audioFile.pause(); //as soon as audio playes it pause so user does not hear a sound 

 audioFile.onplay = function () {
                audioFile.preload("metadata");         
            };

            audioFile.onloadedmetadata = function () {
                console.log(audioFile.duration);
                $scope.audioDuration = audioFile.duration;
            };

when audio play method is called the metadata are loaded

How to play a sound in angularjs

4 Answers4