JavaScript Audio src - should it point to a file? - javascript

I am doing the following, but it is not playing:
var url = "http://translate.google.com/translate_tts?q=Whatismyname";
audio_obj = new Audio(url);
audio_obj.play();
If I use a URL that ends with .mp3, it plays fine. If I use Google TTS service, then it doesn't play. Could anyone please tell me how to make it work with Google TTS?

To solve this problem, you need to close all Chrome windows, open the chrome window by using the following on command prompt. /path to your chrome.exe/Chrome --no-referrers & This will allow the javascript to use urls that do not end with file extensions.
(from user1401976's comment)

Related

Do Chrome flags have an effect on Chrome extension web pages?

I am trying to develop some JavaScript code to try and play audio automatically when a page loads. In order to do this successfully, I went into chrome://flags and set the #autoplay-policy to "no gesture is "required". When I did this, I was able to successfully play audio automatically from a regular JavaScript + HTML files. However, when I put this same code into my custom Chrome extension's content.js file, I get this error "Uncaught (in promise) DOMException", which is the same error I was receiving back before I disabled the Chrome flag in my regular JavaScript + HTML files.
const sound = new Audio()
function playSound() {
sound.src = 'audio/dragon.mp3';
sound.play();
}
setTimeout(function () {
playSound();
}, 2000)
This is the code that works on my regular JavaScript + HTML web page after I changed the #autoplay-policy to no gesture required. When I use this same code in my Chrome extension, it will not play audio automatically.
The overall question is whether or not Chrome flags have an effect on the policies of Chrome extensions? Or if there is something else that is not allowing my audio to play. Because I do not understand why disabling the #autoplay-policy allows my one website to autoplay an MP3 file, but the Chrome extension cannot.
it was fixed by replacing the "sound.src = 'audio/dragon.mp3';"
with "sound.src = chrome.extension.getURL("audio/dragon.mp3");"

Asp Net Core FileContentResult Audio File to Safari

In Safari (11), a static audio file loaded into a src via html or javascript works, albeit with the limitations of requiring user input before playing.
ex.
<audio src="static.mp3">
or
var audio = new Audio('static.mp3');
audio.play();
work fine.
However, I need to load audio files from the database, so I was using a controller action like so:
public FileContentResult GetAudio(int audioId)
{
if (!DbContext.Audios.Any(a => a.Id == audioId))
{
return null;
}
var audio = DbContext.Audios.Single(a => a.Id == audioId);
return File(audio.File, "audio/mp3");
}
and set like
<audio src="getaudio?audioId=1">
or
var audio = new Audio('getaudio?audioId=1');
it will not play in MacOS (Safari) or iOS, but works fine in Chrome and Edge (except on iOS). Depending on how I configure things, I get some form of Unhandled Promise error. I've also tried loading into a Web Audio buffer, with the same exact success and failures.
Does anyone have a solution or workaround to load my audio files on Safari?
EDIT
Ok, so on further testing, I discovered that it's not so much whether the files were sent via action or static file, it's how they were saved to the database in the first place. I'm now working to figure out why files I save (as byte[]) and then reload are not recognized by Safari.
OK, so it turns out, I was making the recordings with MediaRecorder, which is a fairly new feature in Chrome and a few other browsers. It didn't matter what format I told it to save as, because only webm is supported. And guess who doesn't support webm format? Safari. Any other browser was picking it up fine, regardless of what incorrect extension I put on the file.
When I find a webm to m4a conversion, I will add it here. I'm sure there are some solutions out there.

How do I read a JSON file using HTML?

Here is my code:
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script>
$(function() {
var thing = [];
var bar = $.getJSON('C:\Users\cccompro\foo.json', function(obj) {
for (i = 0; i < obj.length; i++) {
thing.push(obj[i]);
}
});
});
</script>
I'm not sure why it doesn't work. "foo.json" contains an array of objects.
If you are trying the code at Question at Chrome or Chromium browsers, launch the browser instance with --allow-file-access-from-files flag set. Note that open instances of Chrome or Chromium should be closed when you launch the browser or the instance will be launched with the open browser instances' configuration folder, instead of with the flag set. You can launch Chrome or Chromium with an existing instance open and honoring the flag by using --user-data-dir flag with value set a different directory than open instance of Chrome or Chromium.
Technically, it is also possible to write to user file system without using an extension with window.webkitRequestFileSystem. Though using chrome.fileSystem within an extension provides an API designed to achieve the read/write.
See
Jquery load() only working in firefox?
Read local XML with JS
How to Write in file (user directory) using JavaScript?
How to use webkitRequestFileSystem at file: protocol
JavaScript/Ajax Write to File
Using <input type="file"> element
How to print all the txt files inside a folder using java script
You cannot read files directly from the users hard drive without the browsers permission. This would be a huge security issue if you could even though there are ways to allow this (checkout guests answer).
You could however try to make the user select the file and then read it with Javascript.
This is called the HTML 5 file API.
However, this doesn't work for any browser and you probably have to use a server anyway in this case.
For more information on this checkout this or this post.

Open video URL in native player from Google Chrome

I'm trying to open a remote video (let's say it's located at http://www.example.com/video.mp4) with the default Android player launched directly from Google Chrome, making use of the brand new intent://.
This is the URI I called through an href tag:
intent://www.example.com/video.mp4#Intent;scheme=file;action=android.intent.action.VIEW;end;
Of course, this URI doesn't work, and Chrome returns error "Unable to perform navigation". I've also tried the same URI omitting scheme=file.
Here's the documentation I've been following: https://developer.chrome.com/multidevice/android/intents
Thanks in advance!
A quick browse of the Gallery App in AOSP shows that it can be launched from a browser. It has a category of BROWSABLE and DEFAULT. This means given the correct intent URL you should be able to launch it.
Obviously specifying a package should work, but that is not flexible, what if there are two gallery apps.
The following Intent scheme url works:
intent://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4#Intent;action=android.intent.action.VIEW;scheme=http;type=video/mp4;end
Note:
scheme = http (it needs to be that or https),
there is a // before the domain, if that is not there the URL is not constructed correctly in the player
action = android.intent.action.VIEW
type = video/mp4 - if this is not in place the video will open in the browser
I have created a demo that works

javascript: reading id3 tags from mp3 stream

I'm writing a Webradio Player for Firefox OS (mobilephone OS based on webstandards). Now I want to add a feature, that displays for example the actual Title like some radiostations are sending and VLC-Mediaplayer for example is able to display. All tested streams are using MP3. I'm playing the audio via the html-audio-tag. Until now i've tested https://github.com/aadsm/JavaScript-ID3-Reader and http://ericbidelman.tumblr.com/post/8343485440/reading-mp3-id3-tags-in-javascript. The JavaScript-ID3-Reader seams not to be able to handle streams. The other way doesn't writes an log via "console.log(title);". Does anybody know a way to add this feature?
Thanks
I've found out that it is impossible this way. But there is a much easier way:
var meta = document.getElementById("audio").mozGetMetadata();
The id audio refers to a audio tag. You can acces the title by meta.title. But there is a bug in firefox (firefox os, too) that causes that this isn't working with mp3-streams: https://bugzilla.mozilla.org/show_bug.cgi?id=908902

Categories

Resources