I am tryint to use howler.js to play a chain of sounds in a phonegap app. In the mobile browser or even the normal browser this code works fine! but when i compile to an apk or i use phonegap build.. i can not get any sound from howler.js :(
the following code is very basic, it is just for one sound clip but my issue is the same...
function load_sound_test() {
// just for set the clip
var namesoundtest = "sounds/effects/" + document.getElementById('xsoundtest').value + ".webm";
var newnamesound = array_sound_test.push(namesoundtest);
var namesoundtest = "sounds/effects/" + document.getElementById('xsoundtest').value + ".mp3";
var newnamesound = array_sound_test.push(namesoundtest);
var namesoundtest = "sounds/effects/" + document.getElementById('xsoundtest').value + ".wav";
var newnamesound = array_sound_test.push(namesoundtest);
sound_test = new Howl({
src: array_sound_test,
preload: true,
autoplay: false,
loop: false,
buffer: true
});
console.log("sound test loaded");
}
function play_sound_test() {
// just to play the clip
sound_test.play()
console.log("sound test played");
}
Related
i write a code for scan passport id .. i have plustek reader (x50). i can capture image from my device in javascript (webcam.js).. but when capture image the light source not run . how can run the led light before capture image ... i need cod in javascript becouse the device in client side .. my application not mobile apps.. it web application .
// Configure a few settings and attach camera
function configure() {
Webcam.set({
width: 320,
height: 240,
image_format: 'jpeg',
jpeg_quality: 90,
flip_horiz: true,
});
Webcam.attach('#my_camera');
}
// A button for taking snaps
// preload shutter audio clip
var shutter = new Audio();
//shutter.autoplay = true;
shutter.src = navigator.userAgent.match(/Firefox/) ? 'shutter.ogg' : 'shutter.mp3';
function take_snapshot() {
// play sound effect
shutter.play();
// take snapshot and get image data
Webcam.snap(function (data_uri) {
// display results in page
document.getElementById('results').innerHTML =
'<img id="imageprev" src="' + data_uri + '"/>';
////////////
////////////////
var base64image = document.getElementById("imageprev").src;
var strImage = base64image.replace(/^data:image\/[a-z]+;base64,/, "");
//
// $("#<%=Image1.ClientID%>")
// .attr("src", base64image)
});
Webcam.reset();
}
I created a sample application using samsung tv sdk and added video player with the bellow code.but it does not playing my video
SceneScene1.prototype.initialize = function () {
alert("SceneScene1.initialize()");
// this function will be called only once when the scene manager show this scene first time
// initialize the scene controls and styles, and initialize your variables here
// scene HTML and CSS will be loaded before this function is called
sf.service.VideoPlayer.init({
onend:function(){
sf.service.VideoPlayer.setFullScreen(false);
}
});
sf.service.VideoPlayer.setKeyHandler(sf.key.RETURN,
function(){
sf.service.VideoPlayer.setFullScreen(false);
});
var vLeft = parseInt($("#svecVideo_y5ww").css('left'));
var vTop = parseInt($("#svecVideo_y5ww").css('top'));
var vHeight = parseInt($("#svecVideo_y5ww").css('height'));
var vWidth = parseInt($("#svecVideo_y5ww").css('width'));
sf.service.VideoPlayer.setPosition({
left:vLeft,
top:vTop,
width:vWidth,
height:vHeight
});
sf.service.VideoPlayer.show();
sf.service.VideoPlayer.play({
url: 'http://media.w3.org/2010/05/sintel/trailer.mp4',
fullScreen: false,
title: 'Samsung movie',
startTime: 5,
liveStream: false,
timeString: true,
authHeader: 'none'
});
};
and if we try to inspect using web inspector.it shows the bellow errors
Service is unavailable due to network or service interference.
The file can't be played because the format isn't supported.
Unable to play the file. Please check it and try again later.
i tried with different files,and shows the same error
I have a function which can let user select the camera and show the captured video on the page [like this].
My code works before Android Google Chrome version 52, but don't know why it is broken now.
First, I check which devices I can use.
navigator.mediaDevices.enumerateDevices()
.then(function(devices) {
devices.forEach(function(device) {
console.log(device.kind + ": " + device.label +
" id = " + device.deviceId);
});
})
.catch(function(err) {
console.log(err.name + ": " + err.message);
});
and it returns two cameras(one front, one back) as I expect.
videoinput: camera 1, facing front id =
ef5f41259c805a533261c2d91c274fdbfa8a6c8d629231cb484845032f90e61a
cam:19 videoinput: camera 0, facing back id =
81448a117b2569ba9af905d01384b32179b9d32fe6a3fbabddf03868f36e4750
Then I follow the sample code, and below is what exactly I use:
<video id="video" autoplay></video>
<script>
var p = navigator.mediaDevices.getUserMedia({ video: {facingMode: "environment", width: 480, height: 800} });
p.then(function(mediaStream) {
var video = document.querySelector('video');
video.src = window.URL.createObjectURL(mediaStream);
video.onloadedmetadata = function(e) {
// Do something with the video here.
};
});
p.catch(function(err) { console.log(err.name); }); // always check for errors at the end.
</script>
Whether I set facingMode: "environment" or facingMode: {exact:"environment"}, it turns out using the front camera. Should I also report to Google?
I've added sounds to my Cordova app (3.4.0), but I can't set the volume unless I play the sound.
Here is the code to make it works :
var myMedia = new Media("file:///android_asset/www/sounds/button.mp3");
myMedia.play();
myMedia.stop();
myMedia.setVolume("0.2");
I tried the below code, but it isn't working too :
var myMedia = new Media("file:///android_asset/www/sounds/button.mp3", function() {
this.setVolume("0.5");
});
Do you have another clean method ?
I set the volume to 0 before playing then incrementally increase it to the required volume. But you shouldn't need to bother with the fade in. Something like this should work:
mediaPlayer = new Media(localSoundsPath + sound_file_name);
mediaPlayer.setVolume(0);
mediaPlayer.play();
mediaPlayer.setVolume(0.2);
I have recently been learning about Firefox OS/B2G. I am aware of the extensive set of APIs in place that are able to fetch images from the wallpaper gallery, change settings and set reminders (to name a few). However, I'm completely stumped as to how to how to change the wallpaper, or, indeed, if this is even possible. Apologies if this is a silly question. Many thanks in advance.
You can do this by using a share activity
// imgToShare is the image you want to set as wallpaper
var shareImage = document.querySelector("#share-image"),
imgToShare = document.querySelector("#image-to-share");
if (shareImage && imgToShare) {
shareImage.onclick = function () {
if(imgToShare.naturalWidth > 0) {
// Create dummy canvas
var blobCanvas = document.createElement("canvas");
blobCanvas.width = imgToShare.width;
blobCanvas.height = imgToShare.height;
// Get context and draw image
var blobCanvasContext = blobCanvas.getContext("2d");
blobCanvasContext.drawImage(imgToShare, 0, 0);
// Export to blob and share through a Web Activitiy
blobCanvas.toBlob(function (blob) {
new MozActivity({
name: "share",
data: {
type: "image/*",
number: 1,
blobs: [blob]
}
});
});
}
else {
alert("Image failed to load, can't be shared");
}
};
}
You can test a live example with the Firefox OS boilerplate https://github.com/robnyman/Firefox-OS-Boilerplate-App/ .