Unsuccessful attempt in adapting audio-visualizer into codepen...need advise - javascript

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 github </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.

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

Related

Can index.html play an audio file? If so, How can I implement it to auto play in the back ground?

Ive tried this in my code and cant seem to make it work.
<body>
<div id='container'>
<canvas id='game' width='320' height='480'></canvas>
</div>
<p>HTML background music test</p>
<embed src="music/alien-spaceship_daniel_simion.mp3" autostart="true">
<script src='Scripts/engine.js'></script>
<script src='Scripts/game.js'></script>
</body>
These sorts of embeds are discouraged these days, as they are not supported on all systems. Additionally, each plugin often had its own distinct API. You should use an <audio> tag instead.
<audio src="music/alien-spaceship_daniel_simion.mp3" controls autoplay />
Note however that autoplay doesn't typically work anymore, thanks to excessive abuse of the feature, and subsequent browser policies.

How to make audio play on body onload?

Yesterday I downloaded a responsive navbar tutorial and saw that the author had used button click sound using JavaScript.
So I try the code (copying it) and was able to make it too. When the button is clicked the background music plays well. But when I try adding the same code to body onload function the music din't play.
So, I thought the code has some error but suddenly I opened the HTML file from Opera Mini for Android and the background music appeared. The code which isn't working in advanced browsers like Chrome is working in Opera Mini. Why is this happening?
<!DOCTYPE html>
<head>
<title>Untitled</title>
<meta charset="UTF-8"/>
<link rel="stylesheet" href="" type="text/css"/>
<script>
function stir0(){
var bbs = new Audio('media/background.ogg');
bbs.play();
alert('bb');
}
function pl(){
var Loops = new Audio('media/button_click.ogg');
Loops.play();
}
</script>
</head>
<body onload="stir0()">
<button id="clk" onClick="pl()">Here</button>
</body>
</html>
As of April 2018, Google had changed their Autoplay Policy. It was implemented in Chrome v.66.
Relevant snippet from the Policy:
Chrome's autoplay policies are simple:
Muted autoplay is always allowed.
Autoplay with sound is allowed if:
User has interacted with the domain (click, tap, etc.).
On desktop, the user's Media Engagement Index threshold has been crossed, meaning the user has previously play video with sound.
On mobile, the user has added the site to their home screen.
Top frames can delegate autoplay permission to their iframes to allow autoplay with sound.
The way I understand it, and it seems to be reflected in your experience: Chrome browser mutes any autoplayed audio if no action of the user had been made with the domain that specificly requests the audio to be played. Once a user has made a positive interaction, the rules soften and the media may be played without consent renewal.
You can do the first one (the background music) with pure HTML:
<audio autoplay>
<source src="media/background.ogg" type="audio/ogg">
</audio>
The second one (the button click) you do like this:
//JS
var Loops = new Audio("media/button_click.ogg");
//Make sure this is a GLOBAL variable.
And in HTML:
<!--HTML-->
<button id="clk" onClick="Loops.play()">Here</button>

What am I missing to have this appear in IE8?

I have several video-js player code on a web page like this:
<video id="vid1" class="video-js vjs-default-skin" width="140" height="120"
controls poster="/1video/countdown.jpg" data-setup='{}'>
<source src="/video/test.mp4" type="video/mp4" />
</video>
And this in the header:
<link href="/video-js-4.12.5/video-js/video-js.css" rel="stylesheet">
<script src="/video-js-4.12.5/video-js/video.js"></script>
<script>videojs.options.flash.swf = "/video-js-4.12.5/video-js/video-js.swf"</script>
What do I need to add so the players appear in IE8? Any help will be appreciated.
Unfortunately, Internet Explorer 8 does not support the <video/> tag that you are using.
Source
Update
video.js should fall back to Flash when loaded in a browser that does not support HTML5 video (e.g. IE 8). There could be several reasons why yours is not working:
Ensure that poster image is set
Use a self hosted version of video.js rather than the CDN. Then ensure that your path to video-js.swf is accurate within the JS file
Ensure that your flash plugin is up-to-date
No. 2 might be most pertinent to your issue. I see that in your header you attempt to change an option. Perhaps try removing that and just ensure that the file path in video.js is accurate (open the JS file and search for video-js.swf).

Issue with the flash fallback of VideoJs with Firefox

I have try to add videoJs to my site to play MP4 files, all works perfectly in Chrome but when I go to Firefox (which doesn't support MP4 files) the flash player stay on a black screen and buttons do nothing.
Simple question: why?
I don't understand, websites like vine.co or instagram use videoJs with no issue but for me this is not the case.
So I tried to change the tech order, now Flash always try to read the video but even on chrome nothing append.
This is my test code:
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
<script src="http://vjs.zencdn.net/4.0/video.js"></script>
<script>
videojs.options.flash.swf = "video-js.swf"
</script>
</head>
<body>
<video id="video" src="http://domain.com/flash/video.mp4" control></video>
<script type="text/javascript">
jQuery(function() {
var player = videojs('video', {"controls": true, "autoplay": false, "preload": "auto", "techOrder": ["flash", "html5"]});
console.log(player);
});
</script>
</body>
</html>
All the files (the swf player, the MP4 video, and the html file) are in the same folder named 'flash'.
Can you help me?
A few things to try here:
Make sure you're loading the video-js css file.
Add the "video-js" and skin classes to your video object as described here (also, it is "controls", not "control"): https://github.com/videojs/video.js/blob/0020ba15b9ae2b60e51d4d8d2751ffa31d18694d/docs/guides/setup.md
If you're loading video js from the CDN, you don't need to set the flash.swf option. That may be causing an issue as well.
You shouldn't need to set the techOrder to get Firefox to behave, and you definitely don't need a corresponding video file for each type of "Tech". Flash will play the fallback in mp4 as long as it's above version 9 or so.
I did run into an issue on Firefox where the Flash fallback would play the video but the video would be blank (audio would play) when I included a "ready" event. I was able to get around this by firing a blur event on the $(this) object. That may be helpful to you if you need to use ready.
You need a flv Version of your Video when you want to deliver it through flash.
It could be usefull to offer another webm Version of your Video. This should bei played in Firefox and Chrome.
For every Tech you need the correspondenting videofile.

Streaming a WAV file. (NOT recording)

I'm trying to play a .wav as background music (It's match ambience) but I'm having problems getting it to stream, it's 20meg so I don't really want to make people wait for it to download... could be waiting 30seconds!
I had it working fine in IE but FF doesn't seem to like any code that works in IE :)
I was using an object to hold the sound which worked in IE. I also had some javascript fading the sound in and out when I wanted to.
Could anyone please provide me with a code snipplet for cross browser compatability for playing wav files without the need of additional plugins (if possible) and without using jquery or prototype or anything similar.
Try this:
<!DOCTYPE html>
<html>
<body>
<audio controls="controls">
<source src="song.ogg" type="audio/ogg" />
<source src="song.mp3" type="audio/mp3" />
Your browser does not support the audio element.
</audio>
</body>
</html>
But you should compress the wav file to mp3. You can see a live demo here.

Categories