JavaScript audio file not playing on flask server - javascript

The error i am getting is :
Uncaught (in promise) DOMException: Failed to load because no supported source was found.
path of audio file is correct !
My code :
image of code

as mdn says, the constructor expects url (DOMString) to https://developer.mozilla.org/en-US/docs/Web/API/HTMLAudioElement/Audio
so, maybe it will be better to pass the url like localhost:3000/src/audio/your_file.mp3 to show browser what to load from server, also check if this file is accessible

Related

Can I play youtube blob url in html 5 video?

I'm working on a video library and i need to play videos from different sources like youtube.
When I inspect element on a youtube video, the url looks like something.
blob:https://www.youtube.com/b3038e77-e79c-4e9f-b574-6f4e5d686b4c
But when I try to use it in html 5 video, it is giving me various errors. I tried many methods but none of 'em are working. I'm getting diff errors like,
Not allowed to load local resource: blob
Uncaught TypeError: Failed to set the 'srcObject' property on 'HTMLMediaElement': Failed to
convert value to 'MediaStream'. Uncaught TypeError: video.play is not a function
My question, it is even possible to play video from third party sources. If yes, can you provide me any working example?
It is very difficult to deduce the errors without a code example, but I believe that the problem is between these 2 items
The first error refers to the source type of the resource, in case you must be testing accessing it directly from an .html file. To work around this you can create a simple server to expose these files accessing through a port, e.g.: localhost:8080/test.html. You can do this using a node http-server by following these instructions.
The other 2 errors refer to the type of file being loaded, sites like youtube, netflix use players generally based on HLS or DASH, which use .mpd and .mp4 files (for DASH) and .m3m8 and .ts (for HLS). These files are not natively supported by most browsers. In this case you need to use a javascript player for that. There are opensource solutions for that, for DASH you can use dash.js (here is a link with examples) and for HLS you can use video.js (here is a link with example)
here an explanation about DASH and HLS
https://www.dacast.com/pt/blog/mpeg-dash-vs-hls-what-you-should-know/#hls_vs._mpeg-dash

Direct link to a file located on Google Drive

What I want to do is to create a direct link URL to a mp3 file which is located on my Google Drive and use it on Audio object of HTML5, but I get 403 error.
I know that when one tries to create a link of a file located on Google Drive, it creates not a direct URL to the file but a URL for viewing the file through a viewer such as
https://drive.google.com/file/d/<file ID>/view?usp=sharing
I googled to find it is possible to rewrite it into a direct link URL like this:
https://drive.google.com/uc?id=<file ID>
I set this URL in the src property of my audio element. However, when I try play() method, the following error is thrown:
GET https://drive.google.com/uc?id=<file ID> 403
myProject.html:1 Uncaught (in promise) DOMException: Failed to load because no supported source was found.
So I tried to access to the URL https://drive.google.com/uc?id=<file ID> from my browser.
Then, I got this:
403. That’s an error.
We're sorry, but you do not have access to this page. That’s all we know.
I tried many times so it is not likely that I'm mis-pasting the <file ID>.
What should I do to create a valid direct link URL of the file?
I would appreciate for any information.
Progress
I got what was wrong.
The problem was that a file on Google Drive can be accessed only from the user who is authorized, which means only the owner of the Google account can access the file URL.
I tried to access it from Chrome Browser which is associated with the Google account, then, the error didn't occur.
However, I want to serve this file to all the people.
What should I do to give permission for access to other people?
You understand that Google drive is not a file hosting service right? This solution is not going to be very stable even if you do get it to work.
For it to work your going to need to set the file public so that everyone can access it. Then i would be willing to bet you will need an API key to do this in the long run.
Also remember that file id is not stable it can change in the future if for example you upload the file.
I solved this on my own. I right clicked the file, clicked Get link, and changed the authorization selection from Restricted into Anyone with the link. Then, the 403 error vanished for the access from anyone.

Numeral.js File Not Found

I am following the instruction to use Numeral.js.
I insert <script src="numeral.min.js"></script> before the end of my <body>.
when I reload the page i get the following error:
GET file:///<project_path>/numeral.min.js net::ERR_FILE_NOT_FOUND
And if I use numeral(1000).format('0,0') I get ReferenceError: numeral is not defined
same problem if I use <script src="//cdnjs.cloudflare.com/ajax/libs/numeral.js/2.0.6/numeral.min.js"></script>:
GET file://cdnjs.cloudflare.com/ajax/libs/numeral.js/2.0.6/numeral.min.js net::ERR_INVALID_URL
What am I doing wrong? how do you use numeral.js?
Try to either :
specify https:// instead of // at the beginning of the cdn url
copy numeral.min.js next to your html file on disk
// means "use the same scheme as current page"
If you opened your html file by opening the file from your disk in your browser, it's url will be a file:// url, hence the error when you tried accessing the file with //<cdn>/...
An alternate way is to start a webserver on your machine and access your page through http(s)://localhost:someport/my test.html

CKEditor external file browser

I'm trying to return file url from external file browser to CKEditor but I'm receiving error which is:
[09:02:18.038] TypeError: A._.filebrowserSe is undefined # http://www.xxx.pl/yyy/js/ckeditor/ckeditor.js:56
I'm using this code:
window.parent.opener.CKEDITOR.tools.callFunction(number,url);
Does anyone know how to solve this issue?
Here is an answer: How can you integrate a custom file browser/uploader with CKEditor?
You should to receive GET parameter called CKEditorFuncNum.
I use it such way in php:
window.parent.CKEDITOR.tools.callFunction(<?=intval($_REQUEST['CKEditorFuncNum'])?>, url, message);

How to load a local JSON object via D3 library in a Rails3 app?

In a file called choropleth.js with the following code:
d3.json("assets/data/us-counties.json", function(json) {
counties.selectAll("path")
.data(json.features)
.enter().append("svg:path")
.attr("class", data ? quantize : null)
.attr("d", path);
});
The JSON object I'm trying to load does not load. I get the following error:
choropleth.js:18 Uncaught TypeError: Cannot read property 'features' of null
I've tried all variants of the path (absolute, relative to the .js file, relative to the view, etc) and none of it works. I'm using the d3 library, but I don't think that plays any part in this -- I think the question is simple "what URL to a specify to load a local .json file?"
see my answer to question 1418350 : basically you need to provide two arguments for the json callback, the first being error, e.g.:
d3.json("world-countries.json", function(error, json) {
// your code
}
If your callback function is passed null, that's because it failed to load the file. There could be a number of different causes for this. An excellent way to figure out why the file isn't loading is to use WebKit's developer tools and the network inspector.
For example, if you don't have the correct URL, you'll see a 404 error and the requested resource will appear red. If the server fails to generate the file with an error, you might see a 500 error instead.
Likewise, if you're viewing a local file (with a file:// URL in the address bar) and trying to load another local file via d3.json, you'll see a security exception because browsers don't allow you to access local files with XMLHttpRequest. D3's README has instructions on starting a web server to circumvent this error.

Categories

Resources