erfolglose Versuch, audio-Visualizer in codepen bei der Anpassung ... muß beraten

ich diesen Audio-Visualizer von https://github.com/wayou/audio-visualizer-with-controls auf codepen.io zu übernehmen versucht. Dies sind die Probleme, denen ich begegnet bin.erfolglose Versuch, audio-Visualizer in codepen bei der Anpassung ... muß beraten

1- Die Veranschaulichungseinrichtung (Bargraph-Display-Typ) funktioniert nicht auf der Leinwand Feld. 2 -Es ist kein Ton zu hören, obwohl der Audio-Player abgespielt wird. Hier

ist der Link zu meiner Datei in codepen http://codepen.io/cgyc8866/pen/wGRqLw

Hier ist die HTML-Datei. Die CSS- und JS-Datei kann unter dem obigen Link in Codepen angezeigt werden.

<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>

Ich hoffe, dass jemand einen Blick nehmen. Ich möchte, dass dieses Programm in einem Codepen funktioniert oder zumindest weiß, warum es nicht funktioniert. Vielen Dank im Voraus.

Quelle

2016-05-05 CGee

Für Audio-Visualisierung Web Audio API ist erforderlich, und das wird wiederum die Audioquelle mit Cross-Origin-Nutzungsanforderungen erfüllen müssen.

Das bedeutet, dass Sie die Audiodaten entweder auf den gleichen Server und den gleichen Speicherort (Ursprung) hochladen müssen wie die Seite, die sie verwendet, oder einen externen Dienst wie ein CDN verwenden, der die Verwendung über mehrere Quellen hinweg erlaubt.

Ein Tipp: Da das Audio auf GitHub gelegen ist, können Sie wie folgt vorgehen:

Verwendung zum Beispiel rawgit.com einen CDN Link für sie zu schaffen
rawgit (Ich bin nicht mit ihnen verbundenen). com erlaubt die Verwendung quer zur Herkunft, aber um dies anzufordern, müssen Sie dem Audio-Tag ein crossOrigin-Attribut hinzufügen.

also in Summe:

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>

(es könnte ein paar Sekunden, um die Audio-vorzuladen)

Das Audiosignal kann jetzt benutzt werden als Quelle für die Web Audio API/den Visualizer. Beachten Sie, dass die Web Audio-API für IE-Benutzer nicht verfügbar ist.

(Achten Sie darauf, die Nutzungsbedingungen mit dem CDN zu lesen, bevor sie veröffentlicht werden.)

Quelle

2016-05-05 11:42:54 K3N

implementiert ich das obige Snippet codepen und die Visualizer funktionierten perfekt. Vielen Dank – CGee

erfolglose Versuch, audio-Visualizer in codepen bei der Anpassung ... muß beraten

Antwort

Verwandte Themen