How would I properly put a mp3 file into my javascript program. By this I mean can I just type the name of any mp3 file I have saved on my computer or does it have to be mentioned somewhere else in the code.
var sound1 = new Audio('file1.mp3');
So if I declared the variable "sound" to play file1 do I have to tell the program what file1 is. If so, how would I do so.
You can use file:///, and then use the file path of your mp3 file
var sound1 = new Audio('file:///C:/Users/user/file1.mp3');
Replace
var sound1 = new Audio('file1.mp3');
Whit
var sound1 = new Audio('http://example.com/sub/file.mp3');
While you want the adress to be the adress to you'r mp3 file on your server.
You might write a shorted version of the adress if the file on sub folder like this:
var sound1 = new Audio('/sub/file.mp3');
Related
For minimal example, I have
Host: 111.222.111.123
Username: user_name
Password: pass_word
File to upload is selected with HTML input element
I can upload the file manually to the target directory on the server with a client like FileZilla.
The target directory is where the file should be uploaded. Its location on the Internet is https://nameofsite/targetdir/, so the file should be reachable on the internet for anyone as https://nameofsite/targetdir/1.html.
But is it possible to upload the file to the server with javascript?
I tried this example taking to account #mcrdy455's answer, but anyway it's not clear what the FtpConnection is:
<input id="fileForUpload" type=file onchange="upload()">
<div id="fileContents"></div>
<script>
function upload() {
var file = document.getElementById("fileForUpload").files[0];
if (file) {
var reader = new FileReader();
reader.readAsText(file, "UTF-8");
reader.onload = function (evt) {
document.getElementById("fileContents").innerHTML = evt.target.result;
var ftp = new FtpConnection("ftp://111.222.111.123/");
ftp.login("user_name", "pass_word");
ftp.put(file, "1.html");
ftp.close();
file.close();
}
}
}
</script>
Uncaught ReferenceError: FtpConnection is not defined
After searching on the Internet, I'm still not sure what project FtpConnection belongs to. Other examples use URLs instead of IP addresses (111.222.111.123).
E.g. Ftp.createCORSRequest('POST', "http://www.ftpjs.xyz/upload.aspx") in this one. I would like not to complicate things (with CORS) and use the 111.222.111.123 address.
If FileZilla can do the job, why couldn't javascript do it? How?
The JavaScript code can NOT access files from your filesystem, use an input type file, and read the file through the FileReader: You can fine more info on how to do this here, Once you have the correct file/blob object you code should work
So im building something but im not allowed to use any external files other than the script.js file itself. I want to play a .mp3 sound in a function but im not sure how to do it without uploading the file into my folder.
You can use javascript to set the audio data src to data:audio/ogg;base64,T2dnUwACAAAAAAAAAAA+... etc.
There's an example here. https://iandevlin.com/html5/data-uri/audio.php
To do this with javascript simply
var audioElement = new Audio();
audioElement.src = "data:audio/ogg;base64,T2dnUwACAAAAAAAAAAA+...";
audioElement.play();
You can encode your mp3 file using base64. Than you can the audio in a string:
var beep = "data:audio/mp3;base64,<paste your base64 here>";
var audio = document.getElementById('audio');
audio.src = beep;
audio.play();
The base64 string can be generate using a shell
cat sound.mp3 | base64
One of the sound files won't play. The two following pieces of code are identical except for the file name.
This doesn't work:
var rewardSound = new Audio("audio/WrongAnswerSound.wav");
function rightAnswer(){
rewardSound.play();
}
However this works fine:
var rewardSound = new Audio("audio/CorrectAnswerSound.wav");
function rightAnswer(){
rewardSound.play();
}
The image is from the File Manager in cPanel. I can play both sounds from the File Manager itself. But, I cann't play the WrongAnswerSound.wav from the JS code. What am I doing wrong?
You kind of have the right idea.
Set a variable for the correct sound by creating a new Audio object:
var correctSound = new Audio("audio/CorrectAnswerSound.wav");
Set a variable for the wrong sound by creating another new Audio object:
var wrongSound = new Audio("audio/WrongAnswerSound.wav");
Now you both of these new objects already hold a play method that they get from the Audio object. So all you have to do to get these sounds to play is this:
correctSound.play();
wrongSound.play();
I'm creating a Google Chrome extension at the moment and I was wondering if it's possible for it to both create JSON files to download (export) and create a button where users can make the extension open and parse JSON files that they have saved in their local file system or on a USB stick (import)?
The parsing of each JSON from the local file system would simply involve reading off each key-value pair and doing something with the data. It would only have to deal with strings, so nothing complicated.
**EDIT: **My question is not a duplicate of this one because I'm not interested in changing the user's download path. All I want is to enable them to, with their consent, download a file to their normal download directory (which Filesaver.js can do). Plus, that post says nothing about importing.
You can fake link to "download" imaginary array MyData or whatever,:
var MyArray = [elem1, elem2, ....];
var _myArray = JSON.stringify(MyArray , null, 4); //indentation in json format, human readable
var vLink = document.createElement('a'),
vBlob = new Blob([_myArray], {type: "octet/stream"}),
vName = 'watever_you_like_to_call_it.json',
vUrl = window.URL.createObjectURL(vBlob);
vLink.setAttribute('href', vUrl);
vLink.setAttribute('download', vName );
vLink.click();
this will export/download your array into json file named as vName variable.
If you wish to import/read file:
create input element (type=file) and make it invisible (here I'm having html element and then adding js listener in script)
<input type="file" id="importOrig" accept=".json" style="display:none"/>
script
importOrig.addEventListener("change", importFun, false);
make button fakeImp (or any element), that you can style as you wish and that will be used as trigger for importing event
fakeImp.onclick = function () {importOrig.click()}
import function (from listener)
function importFun(e) {
var files = e.target.files, reader = new FileReader();
reader.onload = _imp;
reader.readAsText(files[0]);
}
function _imp() {
var _myImportedData = JSON.parse(this.result);
//here is your imported data, and from here you should know what to do with it (save it to some storage, etc.)
......
importOrig.value = ''; //make sure to clear input value after every import
}
Mirth Connect uses iTextpdf and barcode 128 is not an included font. I downloaded code128.ttf font, but how can I reference this with javascript in Mirth Connect? Maybe someone has a Mirth channel that does this or something similar?
Another possibility is Mirth Connect has a Document Writer template option which can use HTML/CSS to reference the local font. I tried many variations of HTML/Inline CSS to no avail.
There are a number of barcode image generator libraries for Java. Create your own Java class that does everything you need, deploy to the /custom-lib folder in the Mirth installation and call the class in your channel's source or destination transformer JS step.
I did it by writing the barcode to a temporary file and referencing that in the Document Writer HTML.
Add a JavaScript transformer step to your destination Document Writer:
// Generate your barcode
var barcodeContents = "0123456789 hello"
var code128 = new Packages.com.lowagie.text.pdf.Barcode128();
code128.setCode(barcodeContents);
// Convert to image
var image = code128.createAwtImage(java.awt.Color.BLACK, java.awt.Color.WHITE);
var bufferedImage = new java.awt.image.BufferedImage(image.getWidth(),image.getHeight(), java.awt.image.BufferedImage.TYPE_INT_RGB);
var graphics = bufferedImage.getGraphics();
graphics.drawImage(image, 0, 0, null);
// Write to JPG file
var filename = UUIDGenerator.getUUID().toString() + '.jpg';
javax.imageio.ImageIO.write(bufferedImage, "jpg", new java.io.File("C:\\Temp\\Barcodes\\" + filename));
// Save the filename to use in your Document Writer
$c('BarcodeFilename', filename);
Then just reference the image in your HTML template:
<img src="/temp/Barcodes/${BarcodeFilename}"/>
As a bonus you can add a Javascript Writer destination to delete the image afterwards:
var filename = $c('BarcodeFilename');
FileUtil.delete("C:\\Temp\\Barcodes\\" + filename);