2

I tried to adopt this audio visualizer from https://github.com/wayou/audio-visualizer-with-controls onto codepen.io. These are the problems I encountered.

1- The visualizer (bar graph type display) is not working on the canvas field. 2 -There is no sound even though the audio player is playing.

Here is the link to my file in codepen http://codepen.io/cgyc8866/pen/wGRqLw

Here is the HTML file. The CSS and JS file can be viewed in codepen at the above link.

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

I hope someone can take a look. I like to get this program working in codepen or at least to know why it is not working. Thank you in advance.

CGee
  • 23
  • 3

1 Answers1

0

For audio visualization Web Audio API is required and that will require in turn the audio source to comply with cross-origin usage requirements.

This means you need to either upload the audio to the same server and location (origin) as the page using it, or use an external service such as a CDN that allow cross-origin usage.

A tip: since the audio is located on GitHub you can do the following:

  • Use for example rawgit.com to create a CDN link for it (I am not affiliated with them)
  • rawgit.com allows cross-origin usage, but to request this you need to add a crossOrigin attribute to the audio tag.

So, in sum:

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>

(it might take a few second to preload the audio)

The audio can now be used as source for Web Audio API/the visualizer. Note that Web Audio API is not available to IE users.

(Make sure to read the terms of use with the CDN before publishing it.)

  • 1
    I implemented the above snippet to codepen and the visualizer worked perfectly. Thank Q. – CGee May 06 '16 at 10:16