angular does not change audio source from json

Issue

Im trying to embedded audio files into HTML with audio tag. The src for playing audio is obtained from API and I have 5-6 different audio files.

When ever I click on playStart(), the audio file played is same, even though the src shows different link

<tbody>
    <tr ng-repeat="val in values track by $index">
        <td ng-bind="$index +1">1</td>
        <td ng-bind="val._id">ED1500322</td>
        <td>
            <audio id="audioTag">
                <source controls ng-src="{{val.file}}"></source>
            </audio>

            <button class="play-btn" ng-click="playStart()"><img src="app_static/images/play.png"></button>
            <button class="play-btn" ng-click="playStop()">stop</button>
        </td>
        <td ng-bind="val.result"></td>

    </tr>
</tbody>

Js file

$scope.playStart = function() {
    var audio = document.getElementById("audioTag");
    audio.load();
    audio.play();

};

$scope.playStop = function() {
    var audio = document.getElementById("audioTag");
    audio.pause();
    audio.currentTime = 0;
};

I only hear same audio clip even though DOM shows the links are different

Any help is appreciated for playing music as obtained from api

Solution

Use Class Like :

HTML

<tbody>
<tr ng-repeat="val in values track by $index">
    <td ng-bind="$index +1">1</td>
    <td ng-bind="val._id">ED1500322</td>
    <td>
        <audio class="audioTag">
            <source controls ng-src="{{val.file}}"></source>
        </audio>

        <button class="play-btn" ng-click="playStart($index)"><img src="app_static/images/play.png"></button>
        <button class="play-btn" ng-click="playStop($index)">stop</button>
    </td>
    <td ng-bind="val.result"></td>

</tr>

JS

$scope.playStart = function(index_) {
    var audio = document.getElementsByClassName("audioTag")[index_];
    audio.load();
    audio.play();

};

$scope.playStop = function() {
    var audio = document.getElementsByClassName("audioTag")[index_];
    audio.pause();
    audio.currentTime = 0;
};

Answered By - Sandeep