src 값을 오디오 파일 배열의 각 인덱스에 대해 지시문 범위 변수에 동적으로 바인딩하는 방법

(function (angular) {
	var ap=angular.module('audio-player-mod',[]);

	ap.directive('audioPlayer', function () {
		 return {
		    restrict: 'EA',
		    scope: {
		      audioFile : "="		      
		    },
		link: function (scope,element,attrs) {
			$(document).ready(function () {				
			
			// scope.audios=scope.audioFile;
			console.log(scope.audioFile);
			  
			  var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
			  var audioElement = document.getElementById('audioElement');
			  var audioSrc = audioCtx.createMediaElementSource(audioElement);
			  var analyser = audioCtx.createAnalyser();
  
			  // Bind our analyser to the media element source.
			  audioSrc.connect(analyser);
			  audioSrc.connect(audioCtx.destination);

			  //var frequencyData = new Uint8Array(analyser.frequencyBinCount);
			  var frequencyData = new Uint8Array(200);

			  var svgHeight = '500';
			  var svgWidth = '2000';
			  var barPadding = '1';

			  function createSvg(parent, height, width) {
			    return d3.select(parent).append('svg').attr('height', height).attr('width', width);
			  }

			  var svg = createSvg('body', svgHeight, svgWidth);

			  // Create our initial D3 chart.
			  svg.selectAll('rect')
			     .data(frequencyData)
			     .enter()
			     .append('rect')
			     .attr('x', function (d, i) {
			        return i * (svgWidth / frequencyData.length);			
			     })
			     .attr('width', svgWidth / frequencyData.length - barPadding);

			  // Continuously loop and update chart with frequency data.
			  function renderChart() {
			     requestAnimationFrame(renderChart);

			     // Copy frequency data to frequencyData array.
			     analyser.getByteFrequencyData(frequencyData);

			     // Update d3 chart with new data.
			     svg.selectAll('rect')
			        .data(frequencyData)
			        .attr('y', function(d) {
			           return svgHeight - d;
			        })
			        .attr('height', function(d) {
			           return d;
			        })
			        .attr('fill', function(d) {
			           return 'rgb(0, 0, ' + d + ')';
			        });
			  }

			  // Run the loop
			  renderChart();

			});

		
		},
		    templateUrl: 'bower_components/audio-player/view/audio-player.html'
		};
	});

})(angular);

<div>
 	<audio id="audioElement" crossorigin="anonymous" src="audioFile"></audio>
    <div>
      <button onclick="document.getElementById('audioElement').play()">Play</button>
      <button onclick="document.getElementById('audioElement').pause()">Pause</button>
      <button onclick="document.getElementById('audioElement').volume+=0.1">Increase Volume</button>
      <button onclick="document.getElementById('audioElement').volume-=0.1">Decrease Volume</button>
    </div>
    </div>

<div class="player-region" ng-if="recordingsCtrl.audioList[0].src">
    <div>
    <div class="player-control">
      <div class="player-control-bottom">
        <audio-player crossorigin="anonymous" audio-file="recordingsCtrl.audioList[0].src"></audio-player>
      </div>
    </div>
    </div>
  </div>