Tentative infructueuse d'adaptation de l'audio-visualiseur dans le codepen ... besoin d'un conseil

J'ai essayé d'adopter ce visualiseur audio de https://github.com/wayou/audio-visualizer-with-controls sur codepen.io. Ce sont les problèmes que j'ai rencontrés.Tentative infructueuse d'adaptation de l'audio-visualiseur dans le codepen ... besoin d'un conseil

1- Le visualiseur (affichage du type graphique à barres) ne fonctionne pas dans le champ de canevas. 2 -Il n'y a pas de son même si le lecteur audio est en cours de lecture.

Voici le lien vers mon fichier dans codepen http://codepen.io/cgyc8866/pen/wGRqLw

Voici le fichier HTML. Les fichiers CSS et JS peuvent être visualisés dans le codepen au lien ci-dessus.

<html> 
<head> 
    <title>audio visualizer with audio element</title> 
    <link rel="stylesheet" type="text/css" href="style.css"> 
</head> 
<body> 
<h3>audio visualizer with controls</h3> 
<p>star me on <a href="https://github.com/wayou/audio-visualizer-with-controls">github</a> </p> 
    <canvas id='canvas' width="800" height="350"></canvas> 
    <br> 
    <br> 
    <audio src="http://wayou.github.io/audio-visualizer-with-controls/assets/sample.mp3" id="audio" controls>audio element not supported</audio> 
    <script src="main.js"></script> 
</body>

J'espère que quelqu'un peut jeter un oeil. J'aime que ce programme fonctionne dans le codepen ou au moins pour savoir pourquoi ça ne marche pas. Merci d'avance.

Source

2016-05-05 CGee

Pour la visualisation audio, une API audio Web est requise et cela nécessite à son tour que la source audio soit conforme aux exigences d'utilisation d'origine croisée. Cela signifie que vous devez télécharger l'audio sur le même serveur et l'emplacement (origine) que la page qui l'utilise, ou utiliser un service externe tel qu'un CDN qui permet une utilisation d'origine croisée.

Un conseil: puisque l'audio est situé sur GitHub, vous pouvez effectuer les opérations suivantes:

Utilisez par exemple rawgit.com pour créer un lien CDN pour (je ne suis pas affilié avec eux)
de rawgit. com permet l'utilisation d'origine croisée, mais pour demander cela, vous devez ajouter un attribut crossOrigin à la balise audio.

Donc, en somme:

Modifed pen here

<audio crossOrigin="anonymous" 
 
src="https://cdn.rawgit.com/wayou/audio-visualizer-with-controls/gh-pages/assets/sample.mp3" 
 
id="audio" controls> 
 
    audio element not supported 
 
</audio>

(cela peut prendre quelques secondes pour précharger l'audio)

L'audio peut maintenant être utilisé comme source pour l'API Web Audio/le visualiseur. Notez que l'API Web Audio n'est pas disponible pour les utilisateurs d'Internet Explorer.

(Assurez-vous de lire les conditions d'utilisation avec le CDN avant de le publier.)

Source

2016-05-05 11:42:54 K3N

I mis en œuvre l'extrait ci-dessus pour codepen et le Visualiseur a parfaitement fonctionné. Merci Q. – CGee

Tentative infructueuse d'adaptation de l'audio-visualiseur dans le codepen ... besoin d'un conseil

Répondre

Questions connexes