vendredi 17 avril 2015

Andular html 5 Audio mute in last Chrome and without spectrum

I have audio player directive, but in Chrome (and firefox) music mute in player and no draw spectrum. But in Opera and IE also its ok. Help me find a Chrome (and firefox) bug...I think, i incorrect paste audio source in html.





var app = angular.module('app', []);
app.directive('spectrum', ['$document', '$timeout', function($document, $timeout) {
return function(scope, element, attr) {

window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function( callback ){
window.setTimeout(callback, 1000 / 60);
};
})();

var audioVisual = document.getElementById('player');
//console.log(wrap);
// canvas stuff
var canvas = document.getElementById('c');
canvas_context = canvas.getContext('2d');

var gradient = canvas_context.createLinearGradient(0, 0, 0, canvas.height);
gradient.addColorStop(1, '#550000');
gradient.addColorStop(0.75, '#ff0000');
gradient.addColorStop(0.25, '#ffff00');
gradient.addColorStop(0, '#ffff00');

canvas_context.fillStyle = gradient;

// audio stuff
audio = new Audio();
var audioSrc = 'http://ift.tt/1DqPvZT';
//audio.__proto__ = scope.audio;
audio.src = audioSrc;
audio.controls = true;
audio.autoplay = true;
//scope.audios.paused = true;
audio.id = 'audioplayer';
audioVisual.appendChild(audio);
scope.audiosrc = audio.src;

// analyser stuff
var context = new AudioContext();
var analyser = context.createAnalyser();
analyser.fftSize = 2048;

// connect the stuff up to eachother/*
var source = context.createMediaElementSource(audio);
source.connect(analyser);
analyser.connect(context.destination);
freqAnalyser();


// draw the analyser to the canvas
function freqAnalyser() {
window.requestAnimFrame(freqAnalyser);
var sum;
var average;
var bar_width;
var scaled_average;
var num_bars = 60;
var data = new Uint8Array(128);
analyser.getByteFrequencyData(data);

// clear canvas
canvas_context.clearRect(0, 0, canvas.width, canvas.height);
var bin_size = Math.floor(data.length / num_bars);
for (var i = 0; i < num_bars; i += 1) {
sum = 0;
for (var j = 0; j < bin_size; j += 1) {
sum += data[(i * bin_size) + j];
}
average = sum / bin_size;
bar_width = canvas.width / num_bars;
scaled_average = (average / 256) * canvas.height;
canvas_context.fillRect(i * bar_width, canvas.height, bar_width - 2, - scaled_average);
}
}

}
}]);



<script src="http://ift.tt/1mQ03rn"></script>
<div ng-app="app">
<div spectrum>
<div class="spectrum">
<canvas id="c" width="500" height="200"></canvas>
</div>
<div id="player"><div id="audio-visual">
</div>
</div>
</div>



Aucun commentaire:

Enregistrer un commentaire