How to use object url in audio src - reactjs

I am making a audio player using
<audio src={audioSrc}>
tag.
When I get the audio file, it was a binary file(blob below) so I created a blob with it.
let test = new Blob(blob, {type: 'audio/mp3'};
And then created an object url
let objUrl = URL.createObjectURL(test);
This objUrl looks like blob:https://xxxxx and when I pass this string to <audio src={objUrl}/>, I cannot hear anything.
I was wondering if I have to convert this url to make it available in audio tag.
Can I get an advice for this problem please?

The first parameter of the Blob constructor is an array. MDN describes it like this:
An Array of ArrayBuffer, ArrayBufferView, Blob, USVString objects, or a mix of any of such objects, that will be put inside the Blob. USVString objects are encoded as UTF-8.
https://developer.mozilla.org/en-US/docs/Web/API/Blob/Blob#parameters
Maybe creating your blob like this already solves the problem:
let test = new Blob([ blob ], { type: 'audio/mp3' });
Another problem I could think of is that the binary data has a different mimeType other than 'audio/mp3' which could cause the audio element to give up decoding the data.

Just add another prop autoplay
<audio src={URL.createObjectURL(test)} autoplay/>

Related

i am trying to get json object value but did not get see object is image

json image
i am trying to get json object value but did not get
json = JSON.parse(json);
alert(json.observations[0].dateCorrect);
Your json is probably wrongly encoded. The actual key is "observations[0].dateCorrect". See matching quotes:
So you'll have to do json['observations[0].dateCorrect'] to get what you want, but you better (if you can) change how json is encoded first.
To make it clearer:
var data = JSON.parse(json);
var key = 'observations[0].dateCorrect';
alert(data[key]);
that's coz the thats not JSON, this is a string you need to parse it before accessing it.
try this
var obj = JSON.parse(json);
alert(obj.observations[0].dateCorrect);

How can I add images from a folder to my swift code?

I am trying to create an animated image background for my swift application. I added a group of 300 JPG images to my assets folder, and am wondering how I can access that folder in my code, iterate through it, and append it to an UIImage array? Or if there is an easier way to do this let me know.
You can name the images accordingly to the frame order
e.g.
image0, image1, image2 ... imageN
and then iterate
var imagesArray:[UIImage] = []
for i in 0...100 {
guard let image = UIImage(named: "image\(i).png") else {
fatalError("Couldn't find image\(i).png")
}
imagesArray.append(image)
}
imageView.animationImages = imagesArray
You can use animatedImageNamed:duration:
Let's say you are animating a spinner. Copy all of your frames into the project and name them as follows:
spinner-1.png
spinner-2.png
spinner-3.png
etc.
Then create the image via:
[UIImage animatedImageNamed:#"spinner-" duration:1.0f];
According to Apple document,
This method loads a series of files by appending a series of numbers to the base file name provided in the name parameter. For example, if the name parameter had ‘image’ as its contents, this method would attempt to load images from files with the names ‘image0’, ‘image1’ and so on all the way up to ‘image1024’. All images included in the animated image should share the same size and scale.
and you can use third party library like FLAnimatedImage or uiimage-from-animated-gif
Hope this will help :)

Coffeescript Array Indexing

If I have an array of photos in coffeescript
photos = [ly.p1, ly.p2, ly.p3, ly.p4, ly.p5, ly.p6, ly.p7, ly.p8, ly.p9, ly.p10, ly.p11, ly.p12]
for photo, i in photos
photoMask = new Layer
How can I write my for loop so that the resulting photoMask objects are outputted as photoMask1, photoMask2, photoMask3 .. photoMask12 ?
EDIT: Further elaboration
Maybe the best way to explain this is what I am trying to do in psuedocode:
for photo, i in photos
photoMask[i] = new Layer
photoMask[i].addSubLayer(photo)
So ly.p1 would have a corresponding photoMask1. That way, I can access photoMask1 separately and independently.
While I agree to the commenters about this being a bit strange, you could use something like this:
photos = [ly.p1, ly.p2, ly.p3, ly.p4, ly.p5, ly.p6, ly.p7, ly.p8, ly.p9, ly.p10, ly.p11, ly.p12]
masks = {}
for photo, i in photos
photoMask = new Layer
masks["photoMask#{i}"] = photoMask
This will create dynamic keynames within the masks object. If you really need them globally (in the browser) you could do the same thing with the window object.
But without knowing what exactly you're trying to do, I wouldn't recommend any of the above.

How to order the JSON values in Servlet?

I am a new guy for JSON, I don't know to send JSON object and Array...
But, I pass the JSON values like the below format,
object.put("code", "1");
object.put("message", "Success");
object.put("Name", "xxx");
object.put("F_Name","yyy");
object.put("Address", "zzz");
object.put("Phone_No","123");
out.println(object);
But it display like
{"Phone_No":"123","message":"Success","Address":"zzz","Name":"xxx","F_Name":"yyy","code":"1"}
I don't know, why it's display like this. How to order this? Please help me.
And this is what format, Array format or object format...
And tell how to send array values in JSON..
Thanks in advance..
You didn't write what is the class of the object. However, if you care about the order, use GSON and its JsonObject class:
import com.google.gson.Gson;
import com.google.gson.JsonObject;
JsonObject object = new JsonObject();
object.addProperty("code", "1");
object.addProperty("message", "success");
object.addProperty("Name", "xxx");
// ...
Gson gson = new Gson();
out.println(gson.toJson(object));
As my understanding of question and the code above, The "object" you already using might be json object. Usually JSON object can maintain data in the form of key, value pairs. So you are putting content into json object and displaying. That's why its getting displayed like that. The displayed format is json format. If you want to put array into json object you can put as you already did for normal strings.
object.put("array1", arrayvariable1[]);
object.put("array2", arrayvariable2[]);
I guess it might have helped you.

Byte Array copy in Jsp

I am trying to append 2 images (as byte[] ) in GoogleAppEngine Java and then ask HttpResponseServlet to display it.
However, it does not seem like the second image is being appended.
Is there anything wrong with the snippet below?
...
resp.setContentType("image/jpeg");
byte[] allimages = new byte[1000000]; //1000kB in size
int destPos = 0;
for(Blob savedChart : savedCharts) {
byte[] imageData = savedChart.getBytes(); //imageData is 150k in size
System.arraycopy(imageData, 0, allimages, destPos, imageData.length);
destPos += imageData.length;
}
resp.getOutputStream().write(allimages);
return;
Regards
I would expect the browser/client to issue 2 separate requests for these images, and the servlet would supply each in turn.
You can't just concatenate images together (like most other data structures). What about headers etc.? At the moment you're providing 2 jpegs butted aainst one another and a browser won't handle that at all.
If you really require 2 images together, you're going to need some image processing library to do this for you (or perhaps, as noted, AWT). Check out the ImageIO library.
Seem that you have completely wrong concept about image file format and how they works in HTML.
In short, the arrays are copied very well without problem. But it is not the way how image works.
You will need to do AWT to combine images in Java

Resources