2017-01-11 6 views
1

Je crée un visualiseur audio pour un site Web en utilisant Canvas, mais il n'apparaît pas dans Safari. Je pense que cela pourrait être un problème avec le chargement de l'audio, car le visualiseur ne s'affichera pas tant que l'audio n'aura pas été chargé.Canvas Audio Visualizer n'apparaît pas dans Safari

Voici ce que je utilise pour charger l'audio:

var request = new XMLHttpRequest(); 

request.open('GET', 'http://content.jwplatform.com/videos/gNilRtS6-xLS6q3Uo.m4a', true); 
request.responseType = 'blob'; 

request.onload = function() { 
    audio.src = window.URL.createObjectURL(request.response); 
    console.log(request.response); 
} 

request.send(); 

Si je navigue à l'URL du fichier audio, il charge bien (et assez rapidement).

J'ai créé un exemple codepen qui fonctionne très bien dans Chrome et Firefox, mais ne fonctionne pas dans Safari: http://codepen.io/ericjacksonwood/pen/bBGEbM

+0

@dandavis par votre lien Safari en tant que support de base depuis v6 (mais préfixé) Je doute que OP utilise un API stereoPanner ou states ou une source constante. Mais de toute façon certains [mcve] ou au moins une sortie de la console aiderait à aider. – Kaiido

+0

@Kaiido: bon oeil, je suis corrigé. – dandavis

+0

@Kaiido Je n'arrive pas à voir cette partie de l'article qui parle de préfixer pour Safari. Pourriez-vous expliquer un peu plus ce que vous voulez dire et où vous l'avez trouvé? J'aimerais que cela fonctionne sur Safari 6+ si possible? Mon lien CodePen est Minimal (j'ai supprimé tout ce qui est inutile pour cet exemple), Complete (j'ai conservé tous les éléments essentiels, et ils peuvent tous être vus dans l'éditeur CodePen) et Verifiable (actuellement ne fonctionne pas sur Safari 10) –

Répondre

0

J'ai pu obtenir ce travail en mettant à jour mon AudioContext(); d'inclure un préfixe de fournisseur de WebKit:

var audioContext = new (window.AudioContext || window.webkitAudioContext)(); 

J'ai mis à jour le codepen à reflext ce changement, et il semble fonctionner très bien maintenant Safari, Chrome et Firefox.