Using monaca, we are developing an app that allows you to make music according to your body's movements.
Currently, we use the index.html at the bottom of the here page to make sounds using the playAudio() function.
However, although the program is programmed to match the movement of the body,
playAudio()The function runs slowly, so music playback cannot keep up with body movements.
I just want to make a sound effect of about 0.5 seconds, but
Does anyone know how to make the sound faster?
Also, here is the program pointed to in the above URL:
Plain Project Skeleton
<style type="text/css">
body{
background-image: url("images/omikuji-bg.png");
background-repeat —No-repeat;
background-position:center;
background-size: 100% 100%;
background-attachment:fixed;
margin:0;
padding:0;
}
#hako{
width: 100%;
text-align:center;
margin —10%0px;
height —80%;
position:fixed;
left:0;
top:0;
}
#bottombar{
position:absolute;
left:0px;
bottom:30px;
width: 100%;
text-align:center;
}
</style>
<script type="text/javascript" src="components/loader.js"></script>
<script type="text/javascript">
// Variables to specify the sound sources. They are used to generate Media objects.
var src1 = "koukaon1.mp3";
var src2 = "koukaon2.mp3";
var src3 = "koukaon3.mp3";
// In order to use Media objects, these variables must be detailed here. Their initial values are null (empty).
varmedia1 = null;
varmedia2 = null;
varmedia3 = null;
// In Android, it's necessary to specify the absolute path
function getPath(){
var str = location.pathname;
vari=str.lastIndexOf('/');
return str.substring(0,i+1);
}
// Call "onDeviceReady" function when "device ready" event of the Core Cordova Plugins completed.
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
alert("Loading Core Cordova Plugins is completed");
/*
Generating objects to play the sound effect.
1st argument [getPath()+src1]indicates the path of the sound file.
2nd and 3rd arguments define a callback function when encoder success and failure responsively.
*/
media1 = new Media(getPath() + src1, onSuccess, onError);
media2 = new Media(getPath() + src2, onSuccess, onError);
media3 = new Media(getPath() + src3, onSuccess, onError);
}
if(typeof Windows!="undefined"){
window.alert=function(s){
new Windows.UI.Popups.MessageDialog(s).showAsync();
}
}
functionomikuji(){
vardice=Math.floor(Math.random()*3);
var image_name;
// Play a different sound effect for each result.
if(dice==0){
image_name = "omikuji-daikichi.png";
media1.play();
} else if(dice==1){
image_name = "omikuji-chuukichi.png";
media2.play();
} else{
image_name = "omikuji-hei.png";
media3.play();
}
document.getElementById("saisyo").setAttribute("style", "display:none;");
document.getElementById("kekka").src="images/"+image_name;
document.getElementById("kekka").setAttribute("style", "display:inline;");
document.getElementById("button").src="images/omikuji-btn-yarinaosu.png";
alert('The Fortune is out! What is the result?');
}
function onSuccess() {
console.log("playAudio():Audio Success";
}
function onError(error){
alert('code:'+error.code+'\n'+
'message:'+error.message+'\n');
}
</script>
</head>
<body>
<divid="hako">
<img src="images/omikuji-box.png" width="160" id="saisyo"/>
<img src="width="230" id="kekka" style="display:none;"/>
</div>
<divid="bottombar">
<img src="images/omikuji-btn-hajimeru.png" onclick="omikuji()" width="160" id="button">
</div>
</body>
The link provided in the question contains two samples using the Media plug-in, but each implementation is slightly different.
new Media(...) and media.play(...) every time.new Media(...) in advance, and only media.play() when you press the button.The latter uses the instances obtained in new Media(...) to skip initialization for the second and subsequent playbacks and allow playback to go faster.
On the other hand, in this question, you mentioned that the playSound() function is ~, so you may have referred to the former sample.So if you call playSound() every time, you will read the audio file every time, which can cause extra lag.
I have verified it with the following code:Like the lag from tap to playback, I think it's easy to tell the difference if you hit it continuously.
<html>
<head>
<metacharset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scale=no">
<script src="components/loader.js"></script>
<link rel="stylesheet" href="components/loader.css">
<script>
function getPath(){
var str = location.pathname;
vari=str.lastIndexOf('/');
return str.substring(0,i+1);
}
var path=getPath()+"sound.wav";
varmedia = null;
function play() {
media = new Media(path);
media.play();
}
function play2(){
if(media==null)
media = new Media(path);
media.play();
}
</script>
<style>
div {padding:1em; border:1px solid gray;background:# fee;}
</style>
</head>
<body>
<!--- to reduce lag until events occur, not onclick, but ontouchstart-->
<divontouchstart="play()">Initialize every time</div>
<divontouchstart="play2()">Initialize once</div>
</body>
</html>
Note that initialization such as file loading occurs when media.play() is first performed.There are no methods available to initialize without playing.iOS may simulate Turn down the volume, but you can't do this on Android and you may need a third-party plug-in.
© 2024 OneMinuteCode. All rights reserved.