wavesurfer.js - getting it to work in browsers other than Firefox - javascript

I'm looking for an html5 audio and video player that has a waveform. I found wavesurfer.js, but that looks like just audio. But hey, I thought I'd play around with it. Here is some very simple code (this is just me with an html file on my desktop - and wav was converted to PCM. Though, I've tried this with a wav and mp3):
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.3.7/wavesurfer.min.js"></script>
<script>
var wavesurfer = Object.create(WaveSurfer);
document.addEventListener('DOMContentLoaded', function () {
wavesurfer.init({
container: '#waveform',
waveColor: '#A8DBA8',
progressColor: '#3B8686'
});
wavesurfer.load('session.wav');
});
wavesurfer.on('ready', function () {
wavesurfer.play();
});
</script>
</head>
<body>
<div id="waveform"></div>
</body>
</html>
This couldn't get any simpler! OK, let's open this in Firefox:
Great! It starts playing. I have a waveform. Awesome!
Now Chrome (or Edge - both do the same):
Absolutely nothing (scratches head). No sound. Nothing.
OK, I found this link here: https://wavesurfer-js.org/example/audio-element/
It says: wavesurfer.js will automatically fallback to HTML5 Media if Web Audio is not supported. However, you can choose to use audio element manually. Simply set the backend option to "MediaElement"
Without googling (listen I'm jumping in the pool feet first here!), I guess I don't know the exact difference between HTML 5 Media and Web Audio. Or my assumption off my head is Web Audio means the HTML 5 Audio tag, which is different from HTML 5 Media How? Not sure yet. I know nothing.
Regardless, I'll change that code I posted above and add one line of code to the init function:
wavesurfer.init({
container: '#waveform',
waveColor: '#A8DBA8',
progressColor: '#3B8686',
backend: 'MediaElement'
});
Running in Chrome now, I get:
It plays. But no waveform.
I mean, I go to the wavesurfer.js website with Chrome and all the demos work. I don't get it. On top of that, I'm concerned about forcing things with the 'MediaElement' backend property.
What am I missing?
EDIT: Oh for goodness sake. I took the same html5.html file (without the back end 'MediaElement' property) and session.wav file and placed them on a web server (IIS). Now, I'm fetching the page through a web server instead of working local to my desktop. Works in Edge and Chrome (and Opera - tried that too!) - No problem. Must be something about working locally that Chrome and Edge don't like. I'll leave this question open - green check marks await for that person that adds valuable info!

Chrome (in an effort to maintain better security involving file system access) prevents the dynamic loading of anything from the file protocol. This (as well as a deep discussion about why this is both a good idea and a bad idea) is referenced here:
https://bugs.chromium.org/p/chromium/issues/detail?id=47416
My personal favorite quote is this one (I have so been this guy in the past):
Your local file policy is 'over the top' as regards security and I urge you to reconsider, please don't fall into the trap of making your browser so secure that it ceases to be useful or usable. Allow the user to decide as Microsoft do with a simple option choice or, God help me, another yellow bar.
You can disable this by launching Chrome with the command line argument --allow-file-access-from-files or by (as you found out) just spinning up a web server, if you want an even easier server I would recommend Python's SimpleHTTPServer which you can start from any directory (in Windows, Mac OSX and Linux) by typing python -m SimpleHTTPServer 8000 (it comes standard with any version of Python)

Related

Force Buffering in whole video while Paused

I want to make the JWPlayer to buffer whole video while in "paused" state.
I used this according to JWPlayer API Reference:
playerInstance.getState("paused", function() {
playerInstance.getBuffer("100");
});
I also tried:
if (playerInstance.getState("paused")) {
playerInstance.getBuffer("100");
}
and lately:
playerInstance.on("bufferChange", function(callback) {
console.log(callback.buffer);
console.log(playerInstance.getBuffer());
});
This last one works with small mp4 video files, but not with large ones.*And of course, I'm including JQuery library into my code.
They aren't all working! I'm running it on Chrome, and the video files are large, I know about Chrome issues in download large video files, but come on, isn't there any workaround to bypass it?! I'll appreciate the support, thanks.
I'll try to answer this since I cannot comment but having the same desire to force load/buffer the entire video so I can create a simulated highlight reel. From this post it looks like some hacks are needed since Chrome tries to pre-load as little as possible (presumably to save bandwidth usage). Basically use an ajax call to download the file to the browser then play that downloaded file.

Html5 audio tag not working in Local IIS for Google translate_tts

Trying to use google's translate_tts as my fallback if the browser doesn't support speechSynthesis for my project.
Now I am having some trouble with getting the html5 audio working properly.
Been scratching my head and googling all day on why it wasn't working for me.
Then I came across some articles/forums saying that it's something to do with IIS. So I did a test code outside my site to see what happens, and was surprised this worked properly! But when using the same code in my original project which is running in IIS it doesn't work. AND it works when using IIS EXPRESS. I check the MIME types in IIS and mpeg and mp3 are there.
Even doing it in javascript doesn't work in IIS.
TextToSpeech.Audio = document.createElement("AUDIO");
TextToSpeech.Audio.src = url;
TextToSpeech.Audio.playbackRate = 1;
TextToSpeech.Audio.preload = 'auto';
TextToSpeech.Audio.volume = 1; // 0 to 1;
TextToSpeech.Audio.addEventListener('ended', function () {
//i have some code here...
});
TextToSpeech.Audio.addEventListener('error', function (error) { });
TextToSpeech.Audio.play();
Has anyone encountered this issue and happened to resolve it? Your help will be much appreciated, Thanks!
UPDATE: After some more googling, this might be because I am calling it from within my site hosted in IIS which has a proper hostname and my IIS Express runs the site in localhost:PORT which Google sees as noreferrer?
starting some time in the last few days, google seems to have placed a 'captcha' on this service and made it so that it can no longer be called by a server. so this may all be moot.
it used to be you could ONLY call it as a noreferrer, so i don't think noreferrer is your issue (or may be the least of your issues starting a few days back). one way to workaround the issue in fact was to add ref='noreferrer' to your link.
and this may be your initial issue: using wget, you had to use the -U Mozilla option which makes wget appear to be a browser. if you called the url without that, it didn't return anything. so if there is a way to make your IIS look like a browser when calling the google url, that may work.
this link google text-to-speech artile still does work in a browser, maybe that will help you use it the way you want.
however... starting july 28th, i get a '503 service not available' after using it for years with wget on my linux server. could be because it's metered and i've overrused it... i hope it comes back on. i only use it about 100x/day.
they always said it was 'not public' but it is widely used that way...
so that could be related if you're still trying to call it from IIS which i would think behaves similarly to calling it from a linux server.

Is Opera Turbo on?

I've got a page which uses Flash with animations (These are not crucial but additional).
Everything works fine, if I'm not using Opera with activated Turbo. Then the Flash Movie is shown as a big ugly arrow in a circle the size of the flash movie which is intended to act as a play button for the flash.
I'm using SWFobject, so I easily could turn of the animation if I knew if Opera's turbo mechanism is used, but how do I do this in JavaScript (or maybe CSS if this goes)
How to reproduce?
Surf this page with Opera (or any other page which uses flash)
http://www.adobe.com/software/flash/about/
Without Opera Turbo you see a flash animation and flash version information
With Opera Turbo you see two white arrows in gray circles
edit 1
I'm quite sure now, that there is not a pure JS solution and not a PHP solution. The best guess is a combined AS/JS solution.
Client side detection:
There is no way to access that through javascript. Client side detection for opera turbo is not possible currently, maybe it will be supported in the future but who knows?
Server side detection:
When opera turbo is enabled all requests from client are done to opera servers, the opera servers are going to access your application (do compressions) and forward the processed content to the final client (user's computer).
With that in mind, let's do some network sniffing and see where are your connection going:
~$ nslookup opera10beta-turbo.opera-mini.net
>Server: 189.40.226.80
>Address: 189.40.226.80#53
>Non-authoritative answer:
>opera10beta-turbo.opera-mini.net canonical name = global-turbo-1.opera-mini.net.
>Name: global-turbo-1.opera-mini.net
>Address: 141.0.11.252
~$ nslookup 64.255.180.252
>Server: 192.168.1.254
>Address: 192.168.1.254#53
>Non-authoritative answer:
>252.180.255.64.in-addr.arpa canonical name = 252.0-24.180.255.64.in-addr.arpa.
>252.0-24.180.255.64.in-addr.arpa name = global-turbo-1-lvs-usa.opera-mini.net.
As you can see the name and canonical name from opera servers can be used to detect if you application is being accessed through opera servers intermediation. I think server side coding could handle that (not sure what language are you using on your server).
It's good to remember that Opera Turbo will not intermediate your requests if you're accessing something in your local server.
Hope it helps.
You can try to check if the flash object is loaded with some javascript. This code works on my computer with Opera 11:
<html>
<head>
<script language=JavaScript>
function isFlashBlocked(){
var blocked;
try {
// Can test this on any flash object on the page
window.document.myFlash.SetVariable("dummy", "dummy");
// Flash not blocked
blocked = false;
}
catch(err) {
// Flash blocked
blocked = true;
}
return blocked;
}
function removeBlockedFlash() {
if (isFlashBlocked()) {
// Hide all flash objects
window.document.myFlash.setAttribute("style", "display: none");
// ...
// Display replacement content
window.document.myImage.setAttribute("style", "display: inline");
// ...
}
}
</script>
</head>
<body onload="removeBlockedFlash()">
<object type="application/x-shockwave-flash" data="HelloWorld.swf"
width="100" height="100" id="myFlash">
</object>
<img src="image.jpg" style="display: none" id="myImage" />
</body>
</html>
If you detect that flash is blocked, you hide every flash object and display what you want.
Edit: This code doesn't work with Firefox, you probably need to detect the browser before using this function.
I believe that the answer to the speed issue is that the Flash content is not downloaded initially. You have to manually click on the icon to download it. Same for animated GIFs. This is part of the strategy to boost the speed. (cf., this Opera Desktop Team post.)
Which is why you want to know how to check for Opera Turbo, and not just Opera. From my local tests, I cannot tell the difference using PHP's _SERVER["HTTP_USER_AGENT"] variable. I think this is similar to what Opera lists as the user agent string, as shown here and here.
It seems that, rather notifying the website of the browser condition, Opera silently manages the request results differently.

PDF files do not open in Internet Explorer with Adobe Reader 10.0 - users get an empty gray screen. How can I fix this for my users?

There is a known issue with opening a PDF in Internet Explorer (v 6, 7, 8, 9) with Adobe Reader X (version 10.0.*). The browser window loads with an empty gray screen (and doesn't even have a Reader toolbar). It works perfectly fine with Firefox, Chrome, or with Adobe Reader 10.1.*.
I have discovered several workarounds. For example, hitting "Refresh" will load the document properly. Upgrading to Adobe Reader 10.1.*, or downgrading to 9.*, fixes the issue too.
However, all of these solutions require the user to figure it out. Most of my users get very confused at seeing this gray screen, and end up blaming the PDF file and blaming the website for being broken. Honestly, until I researched the issue, I blamed the PDF too!
So, I am trying to figure out a way to fix this issue for my users.
I've considered providing a "Download PDF" link (that sets the Content-Disposition header to attachment instead of inline), but my company does not like that solution at all, because we really want these PDF files to display in the browser.
Has anyone else experienced this issue?
What are some possible solutions or workarounds?
I'm really hoping for a solution that is seamless to the end-user, because I can't rely on them to know how to change their Adobe Reader settings, or to automatically install updates.
Here's the dreaded Gray Screen:
Edit: screenshot was deleted from file server! Sorry!
The image was a browser window, with the regular toolbar, but a solid gray background, no UI whatsoever.
Background info:
Although I don't think the following information is related to my issue, I'll include it for reference:
This is an ASP.NET MVC application, and has jQuery available.
The link to the PDF file has target=_blank so that it opens in a new window.
The PDF file is being generated on-the-fly, and all the content headers are being set appropriately.
The URL does NOT include the .pdf extension, but we do set the content-disposition header with a valid .pdf filename and the inline setting.
Edit: Here is the source code that I'm using to serve up the PDF files.
First, the Controller Action:
public ActionResult ComplianceCertificate(int id){
byte[] pdfBytes = ComplianceBusiness.GetCertificate(id);
return new PdfResult(pdfBytes, false, "Compliance Certificate {0}.pdf", id);
}
And here is the ActionResult (PdfResult, inherits System.Web.Mvc.FileContentResult):
using System.Net.Mime;
using System.Web.Mvc;
/// <summary>
/// Returns the proper Response Headers and "Content-Disposition" for a PDF file,
/// and allows you to specify the filename and whether it will be downloaded by the browser.
/// </summary>
public class PdfResult : FileContentResult
{
public ContentDisposition ContentDisposition { get; private set; }
/// <summary>
/// Returns a PDF FileResult.
/// </summary>
/// <param name="pdfFileContents">The data for the PDF file</param>
/// <param name="download">Determines if the file should be shown in the browser or downloaded as a file</param>
/// <param name="filename">The filename that will be shown if the file is downloaded or saved.</param>
/// <param name="filenameArgs">A list of arguments to be formatted into the filename.</param>
/// <returns></returns>
[JetBrains.Annotations.StringFormatMethod("filename")]
public PdfResult(byte[] pdfFileContents, bool download, string filename, params object[] filenameArgs)
: base(pdfFileContents, "application/pdf")
{
// Format the filename:
if (filenameArgs != null && filenameArgs.Length > 0)
{
filename = string.Format(filename, filenameArgs);
}
// Add the filename to the Content-Disposition
ContentDisposition = new ContentDisposition
{
Inline = !download,
FileName = filename,
Size = pdfFileContents.Length,
};
}
protected override void WriteFile(System.Web.HttpResponseBase response)
{
// Add the filename to the Content-Disposition
response.AddHeader("Content-Disposition", ContentDisposition.ToString());
base.WriteFile(response);
}
}
It's been 4 months since asking this question, and I still haven't found a good solution.
However, I did find a decent workaround, which I will share in case others have the same issue.
I will try to update this answer, too, if I make further progress.
First of all, my research has shown that there are several possible combinations of user-settings and site settings that cause a variety of PDF display issues. These include:
Broken version of Adobe Reader (10.0.*)
HTTPS site with Internet Explorer and the default setting "Don't save encrypted files to disk"
Adobe Reader setting - disable "Display PDF files in my browser"
Slow hardware (thanks #ahochhaus)
I spent some time researching PDF display options at pdfobject.com, which is an EXCELLENT resource and I learned a lot.
The workaround I came up with is to embed the PDF file inside an empty HTML page. It is very simple: See some similar examples at pdfobject.com.
<html>
<head>...</head>
<body>
<object data="/pdf/sample.pdf" type="application/pdf" height="100%" width="100%"></object>
</body>
</html>
However, here's a list of caveats:
This ignores all user-preferences for PDFs - for example, I personally like PDFs to open in a stand-alone Adobe Reader, but that is ignored
This doesn't work if you don't have the Adobe Reader plugin installed/enabled, so I added a "Get Adobe Reader" section to the html, and a link to download the file, which usually gets completely hidden by the <object /> tag, ... but ...
In Internet Explorer, if the plugin fails to load, the empty object will still hide the "Get Adobe Reader" section, so I had to set the z-index to show it ... but ...
Google Chrome's built-in PDF viewer also displays the "Get Adobe Reader" section on top of the PDF, so I had to do browser detection to determine whether to show the "Get Reader".
This is a huge list of caveats. I believe it covers all the bases, but I am definitely not comfortable applying this to EVERY user (most of whom do not have an issue).
Therefore, we decided to ONLY do this embedded option if the user opts-in for it. On our PDF page, we have a section that says "Having trouble viewing PDFs?", which lets you change your setting to "embedded", and we store that setting in a cookie.
In our GetPDF Action, we look for the embed=true cookie. This determines whether we return the PDF file, or if we return a View of HTML with the embedded PDF.
Ugh. This was even less fun than writing IE6-compatible JavaScript.
I hope that others with the same problem can find comfort knowing that they're not alone!
I don't have an exact solution, but I'll post my experiences with this in case they help anyone else.
From my testing, the gray screen is only triggered on slower machines [1]. To date, I have not been able to recreate it on newer hardware [2]. All of my tests have been in IE8 with Adobe Reader 10.1.2. For my tests I turned off SSL and removed all headers that could have disabled caching.
To recreate the gray screen, I followed the following steps:
1) Navigate to a page that links to a PDF
2) Open the PDF in a new window or tab (either via the context menu or target="_blank")
3) In my tests, this PDF will open without error (however I have received user reports indicating failure on the first PDF load)
4) Close the newly opened window or tab
5) Open the PDF (again) in a new window or tab
6) This PDF will not open, but instead only show the "gray screen" mentioned by the first user (all subsequent PDFs that are loaded will also not display -- until all browser windows are closed)
I performed the above test with several different PDF files (both static and dynamic) generated from different sources and the gray screen issue always occurs when following the above steps (on the "slow" computer).
To mitigate the problem in my application, I "tore down" the page that links to the PDF (removed parts piece by piece until the gray screen no longer occurred). In my particular application (built on closure-library) removing all references to goog.userAgent.adobeReader [3] appears to have fixed the issue. This exact solution won't work with jquery or .net MVC but maybe the process can help you isolate the source of the issue. I have not yet taken the time to isolate which particular portion of goog.userAgent.adobeReader triggers the bug in Adobe Reader, but it is likely that jquery might have similar plugin detection code to that used in closure-library.
[1] Machine experiencing gray screen:
Win Server '03 SP3
AMD Sempron 2400+ at 1.6GHz
256MB memory
[2] Machine not experiencing gray screen:
Win XP x64 SP2
AMD Athlon II X4 620 at 2.6 GHz
4GB memory
[3] http://closure-library.googlecode.com/svn/docs/closure_goog_useragent_adobereader.js.source.html
I ran into this issue around the time MVC1 was first released. See Generating PDF, error with IE and HTTPS regarding the Cache-Control header.
For Win7 Acrobat Pro X
Since I did all these without rechecking to see if the problem still existed afterwards, I am not sure which on of these actually fixed the problem, but one of them did. In fact, after doing the #3 and rebooting, it worked perfectly.
FYI: Below is the order in which I stepped through the repair.
Go to Control Panel > folders options under each of the General, View and Search Tabs
click the Restore Defaults button and the Reset Folders button
Go to Internet Explorer, Tools > Options > Advanced > Reset ( I did not need to delete personal settings)
Open Acrobat Pro X, under Edit > Preferences > General.
At the bottom of page select Default PDF Handler. I chose Adobe Pro X, and click Apply.
You may be asked to reboot (I did).
Best Wishes
In my case the solution was quite simple.
I added this header and the browsers opened the file in every test.
header('Content-Disposition: attachment; filename="filename.pdf"');
I had this problem. Reinstalling the latest version of Adobe Reader did nothing. Adobe Reader worked in Chrome but not in IE. This worked for me ...
1) Go to IE's Tools-->Compatibility View menu.
2) Enter a website that has the PDF you wish to see. Click OK.
3) Restart IE
4) Go to the website you entered and select the PDF. It should come up.
5) Go back to Compatibility View and delete the entry you made.
6) Adobe Reader works OK now in IE on all websites.
It's a strange fix, but it worked for me. I needed to go through an Adobe acceptance screen after reinstall that only appeared after I did the Compatibility View trick. Once accepted, it seemed to work everywhere. Pretty flaky stuff. Hope this helps someone.
Hm, would it be possible to simply do this:
The first time your user opens a pdf, using Javascript you make a popout that basically says "If you cannot see your document, please click HERE". Make "HERE" a big button where it will explain to your user what's the problem. Also make another button "everything's fine". If the user clicks on this one, you remember it, so it isn't displayed in the future.
I'm trying to be practical. Going to great lengths trying to solve this kind of problem "properly" for a small subset of Adobe Reader versions doesn't sound very productive to me.
Experimenting more, the underlying cause in my app (calling goog.userAgent.adobeReader) was accessing Adobe Reader via an ActiveXObject on the page with the link to the PDF. This minimal test case causes the gray screen for me (however removing the ActiveXObject causes no gray screen).
<!DOCTYPE html>
<html lang="en">
<head>
<title>hi</title>
<meta charset="utf-8">
</head>
<body>
<script>
new ActiveXObject('AcroPDF.PDF.1');
</script>
<a target="_blank" href="http://partners.adobe.com/public/developer/en/xml/AdobeXMLFormsSamples.pdf">link</a>
</body>
</html>
I'm very interested if others are able to reproduce the problem with this test case and following the steps from my other post ("I don't have an exact solution...") on a "slow" computer.
Sorry for posting a new answer, but I couldn't figure out how to add a code block in a comment on my previous post.
For a video example of this minimal test case, see: http://youtu.be/IgEcxzM6Kck
I realize this is a rather late post but still a possible solution for the OP. I use IE9 on Win 7 and have been having Adobe Reader's grey screen issues for several months when trying to open pdf bank and credit card statements online. I could open everything in Firefox or Opera but not IE. I finally tried PDF-Viewer, set it as the default pdf viewer in its preferences and no more problems. I'm sure there are other free viewers out there, like Foxit, PDF-Xchange, etc., that will give better results than Reader with less headaches. Adobe is like some of the other big companies that develop software on a take it or leave it basis ... so I left it.
We were getting this issue even after updating to the latest Adobe Reader version.
Two different methods solved this issue for us:
Using the free version of Foxit Reader application in place of Adobe Reader
But, since most of our clients use Adobe Reader, so instead of requiring users to use Foxit Reader, we started using window.open(url) to open the pdf instead of window.location.href = url. Adobe was losing the file handle on for some reason in different iframes when the pdf was opened using the window.location.href method.

FlowPlayer - error handler firing on one of two machines, same code?

ASP.NET MVC2, framework 3.5
Machine 1: dev box - Win7 Ultimate x64(IIS 7.5), VS2010 Ultimate, Firefox 3.6
Machine 2: dev server - Win server 2003 (IIS 6).
Code on the server is compiled from SVN and deployed to the IIS folders on the server by TeamCity.
The problem is this: I have a page which shows a video using FlowPlayer. I have assigned an error handler like so:
<script language="javascript">
function playerError(errorCode, errorMessage) {
window.location = "/videos/unavailable";
}
flowplayer("player"
, "/scripts/flowplayer/flowplayer-3.2.2.swf"
, {
onError: playerError
,
clip: { autoPlay: false, autoBuffering: true }
}
);
</script>
When the player cannot find the video it's supposed to play, I expect it to call its onError handler, which would then redirect the user to the "Unavailable" page. This works as expected on my dev box. Identical code on the server does not work. I am viewing both in the same browser from the same machine.
This is bizarre. Ideas?
Turns out that there are several ways to encode movie files. In the MP4s we are using, it appears that a block of meta data containing some attributes that are required to start playing the file can be located at the end of the file, or at the beginning.
For streaming, this must be at the beginning of the file. Otherwise, the player must download the entire file before it can start playing. With a 100MB file this is, obviously, less than ideal.
There are several freeware utilities available that will move this head to the required position for streaming.
Hopefully this will help someone else.

Categories