I am trying to add a sound to my Noty instance to my Laravel 5.7 app and seem to be running into some issues. The errors I am getting are Uncaught(in promise) DOMException and Get... 404, but I am using the Path intellisense addon in VScode so I am sure it is right. Here is my code:
new Noty({
text:'Example',
type:'info',
timeout:2000
}).on('onShow', function() {
var audio = new Audio('../../../public/sounds/appointed.mp3');
audio.play();
})
.show();
I really appreciate your help
While ../../../public/sounds/appointed.mp3 is correct relative path when you use the editor, it doesn't exist on the server (404 page).
Files that are in the public/ folder should be accessed by using /.
Your mp3 file should be accessed by using /sounds/appointed.mp3 (without public/).
Test it out by trying to load mp3 file http://localhost/sounds/appointed.mp3
Related
I am trying to load an mp3 files (according to the examples) but I am getting
Unable to load bg.mp3.
The request status was: 0 ()
The error stack trace includes: loadSound
I have referenced my problem to this Github issue https://github.com/processing/p5.js-sound/issues/141 but I am unable to find a solution.
Also, I am using Brackets editor which starts a local server and opens a new Chrome instance.
let mySound;
function preload() {
soundFormats('mp3', 'ogg');
mySound = loadSound("bg.mp3");
}
function setup(){
createCanvas(displayWidth,displayHeight);
mySound.setVolume(0.1);
mySound.play();
}
Strange, the Sound: Load and Play Sound example seems to work fine.
The error seems to point to on an XHR load error, but it's unclear why.
It's worth trying the full version of loadSound() including the error callback:loadSound(path, [successCallback], [errorCallback], [whileLoading]).
Hopefully the errorCallback details will help solve the problem
e.g.
let mySound;
function onSoundLoadSuccess(e){
console.log("load sound success",e);
}
function onSoundLoadError(e){
console.log("load sound error",e);
}
function onSoundLoadProgress(e){
console.log("load sound progress",e);
}
function preload() {
soundFormats('mp3', 'ogg');
mySound = loadSound("bg.mp3",onSoundLoadSuccess,onSoundLoadError,onSoundLoadProgress);
}
function setup(){
createCanvas(displayWidth,displayHeight);
mySound.setVolume(0.1);
mySound.play();
}
Also try to navigate to the web server Brackets launches and access the file manually.
(e.g. http://localhost:BRACKETS_HTTP_PORT_HERE/bg.mp3). If everything is ok (bg.mp3 is in the same folder as the index.html file), your browser should load and display the default audio playback controls.
It's worth noting there are many other http servers you could try, here a few examples:
if you're on OSX you can use Python's HTTP Server (python -m SimpleHTTPServer in python 2 or python -m http.server)
if you use node.js there' an http-server module (e.g. npm install http-server then http-server in your project folder)
Apache variants (depending on OS, MAMP/WAMP/XAMPP, etc.), though might be overkill
The quick fix for anyone having this issue is to use a Local web server. (mamp/xamp/local etc). Then reference it in the preload/setup
sound = loadSound('http://localhost/audio.mp3', loaded);
The documentation does state -
you will need the p5.sound library and a running local server
I have this to upload photos:
module.exports = function (req, image, url, callback) {
var filename = (Math.floor((Math.random() * 100000000000) + 1)) + ".png";
req.file(image).upload({
dirname: '../../assets/images' + url
,
saveAs: function(file, cb) {
cb(null, filename);
}
}, function(error, uploadedFiles) {
return callback(null, "http://" + req.headers.host + "/images" + url + filename)
});
}
And it returns an url like this: http://localhost:1349/images/dependent/photos/30363010266.png
I can see that my photo is uploaded in project folder because I see it physically. But the URL do not work and has appeared not found error.
If I restart server, the URL works fine.
Thanks!
As #Eugene Obrezkov pointed out, your issue is related to where you are uploading your images and the grunt task runner. All the assets are copied from that folder (/assets) to the .tmp, and changes are watched by the grunt task runner, but that doesn't include new image files(If you are to an empty folder in the assets folder, in your case to the image folder). So the solution is quite easy, you must upload directly to the .tmp folder, ideally to .tmp/public/uploads/year/month/, you can choose your path as you see fit. Now there is a caveat with this approach, and it is that there is a grunt task that clears the contents of the .tmp folder on sails lift, so you will get the opposite effect, now to avoid this is quite easy too, you must edit the clean.js task to delete specific folders, to avoid deleting your uploads folder.
Go to to your project folders tasks/config/clean.js, and replace what's in there for this code, or modify it as you need.
module.exports = function(grunt) {
grunt.config.set('clean', {
dev: [
getFolderPath('fonts/**'),
getFolderPath('images/**'),
getFolderPath('images/**'),
getFolderPath('js/**'),
getFolderPath('styles/**'),
getFolderPath('*.*')
],
build: ['www']
});
grunt.loadNpmTasks('grunt-contrib-clean');
};
function getFolderPath(folderName){
return '.tmp/public/' + folderName;
}
Now your uploads will appear immediately to your end-user without restart, and restarts won't delete those uploads. Just make sure the .tmp/public/uploads/ path exist before trying to upload, or use mkdir to create it via code if not found.
There are other solutions, like making sure there is at least a file in the folder you are uploading to when the server starts, or using symlinks, but i think this is a cleaner approach. You can check those options here:
Image not showing immediately after uploading in sails.js
If you take a look into tasks folder, you can find Grunt task that copies all the assets folder to .tmp folder and make .tmp folder as static public folder.
When you are running Sails application, it runs these Grunt tasks, so that if you uploading file direct to assets folder it will not be accessible until you re-run server and Grunt tasks.
Solution? There is no solution. Basically, you are doing it wrong. Best practices is to store images\files\whatever on S3 buckets, Google Storage, another hard drive at least, but not assets itself. Because it's your source files of your project and in there should be located only files needed for project itself, not user's files, etc...
You can achieve without modifing any grunt task. I had the same issue and I have just solved it.
I see you already have an explanation of what's happening in other comments, so I'll go straight to my solution. I uploaded the files to the .tmp folder, and on the callback of the upload, I coppied them to the assets folder using the file system (fs-extra is a great package for that).
So now I can see the images in my UI as soon as it's added (cause I uploaded them to .tmp) and when my server stops, .tmp will be lost, but generated again in the next lift with the files copied to assets.
Hope it helps!
This is how I solved this problem. The answer requires several steps. I am assuming you want to place your recently uploaded images in a folder called users.
Steps:
1. npm install express --save (If you don't have it installed)
Create a Users folder in your apps root directory.
Open the text editor and view the following file config\express.js
Add or replace with the code
`
var express = require('express');
module.exports.http = {
customMiddleware: function (app) {
app.use('/users', express.static(process.cwd() + '/users'));
}
};
`
5. Make certain the newly uploaded images are placed in the Users folder
Finish
I've uploaded them to a public folder. Everything works apart from these two.
Is there some extra "Google Drive Hosting" script I need to put in?
Or should it be working without any extra and I need re-check my code?
Many thanks!
me also faced same problem while uploading my custom Jquery Plugin, bt i can able upload js file to an existing folder which is already using for my previous project , me faced this problem while creating new folder only
but
In my new folder me just deleted that js file and uploaded it again ,its working fr me nw
save file as .js
content of that file
(function ( $ ) {
$.fn.doValidation = function(options) {
//ur code goes here
}( jQuery ));
I'm developing an app for Windows Phone 7 and I'm using a Phonegap template for it.
Everything looks perfect, but now I’m stuck trying to open a PDF file in the browser.
I tried the following but that doesn’t work because the url of the PDF exceeds the 2048 character limit (it’s a data url). This code runs after the deviceReady event was fired.
var ref = window.open('http://www.google.com', '_blank', 'location=no');
ref.addEventListener('loadstart', function () { alert(event.url); });
Now, I'm trying to save the PDF file to storage and then I'm trying to have it opened by the browser, but the browser doesn't show anything. I'm editing the InAppBrowser.cs code from cordovalib and I added the following lines before calling browser.Navigate(loc);
private void ShowInAppBrowser(string url)
{
IsolatedStorageFile store = IsolatedStorageFile.GetUserStoreForApplication();
FileStream stream = store.OpenFile("test.pdf", FileMode.Create);
BinaryWriter writer = new BinaryWriter(stream);
var myvar = Base64Decode("the big data url");
writer.Write(myvar);
writer.Close();
if (store.FileExists("test.pdf")) // Check if file exists
{
Uri loc = new Uri("test.pdf", UriKind.Relative);
...
}
}
This code is returning the following error:
Log:"Error in error callback: InAppBrowser1921408518 = TypeError: Unable to get value of the property 'url': object is null or undefined"
I don’t wanna use ComponentOne.
Any help would be greatly appreciated!
You cannot open pdf files from the isolated storage in the default reader for PDF files. If the file is online e.g. it has a URI for it, you can use WebBrowserTask to open it since that will download and open the file in Adobe Reader.
On Windows Phone 8 you actually can open your own file in default file reader for that extension, but I am not sure how that will help you since you target PhoneGap and Windows Phone 7.
Toni is correct. You could go and try to build your own viewer (which would be the same thing as using C1, but with more time involved). I worked on a port of iTextSharp and PDFSharp for WP7, but neither of which are PDF Viewers. They are good for creating PDFs and parsing them some (but to render them there is more work involved). This has been a personal quest of mine, but honestly the best I have gotten is to be able to extract some images from the PDF (and none of the text)
try this
var installedLocation = Windows.ApplicationModel.Package.Current.InstalledLocation;
var assets = await installedLocation.GetFolderAsync("Assets");
var pdf = await assets.GetFileAsync("metro.pdf");
Windows.System.Launcher.LaunchFileAsync(pdf);
This worked correctly on my Device.
I'm new to this Ajax thing. I wanted to try this
http://labs.adobe.com/technologies/spry/samples/data_region/SuggestSample.html
neat little Autosuggest form.
The form doesn't work when i save it locally.
Below there is a list of what i've done and used so far :
Firefox -> save pages as ..(index.html)
new folder ( test23 )
also saved the products.xml
opened index.html
change this line : var dsProducts = new Spry.Data.XMLDataSet("../../demos/products/products.xml", "/products/product", { sortOnLoad: "name" })
into : var dsProducts = new Spry.Data.XMLDataSet("products.xml", "/products/product", { sortOnLoad: "name" })
test failed :(
Can anyone help me out ?
AJAX requests cannot access the local file system, so requests like that will fail. You will need to have the page up on a webserver. If you want a local one, install XAMPP or something similar.
I just tried for like three minutes and got it to work at the first try (without images). you have to remember to get all the scripts and actually point to them in the main html file.
Don't forget the script tags on lines 41 through 43.
Kris
-- additions:
I tested on my Mac's local filesystem without any server using Safari as my browser. I have since deleted the files but could easily do it again and put the files up for download.