Source language: Translate to:

Javascript if else issue

General questions about NeoAppBuilder - our rapid application development tool for building HTML5, web and mobile apps.

Moderator: Neosoft Support

Javascript if else issue

Postby PaulTomo » Mon Feb 16, 2015 11:57 am

Not sure if it is something I'm doing wrong but I can't seem to get a simple Javascript if / else condition to work as I would expect when run under NeoAppBuilder.

I'm actually trying to get an audio file to play and then pause on the same button. It play's fine when clicked but rather than pause on the second click, it plays a second, third, forth and so on, instance of the track.

Code: Select all
BeginJS
var audioElement = document.createElement('audio');
{
  if (play != true) {
    audioElement.setAttribute('src', 'http://mywebaddress/myaudio.mp3');
    audioElement.play();
    var play = true;
  } else {
    audioElement.pause();
    var play = false;
  }
}
$rootScope.nabVar = play;
alert("play is " + $rootScope.nabVar);
EndJS


I'm sure I have my logic right but even if I just try the if / else with the audio play elements removed, the result returned is always "true"

I have also done the same test with a NeoAppBuilder if / else and this works as I would expect.

Code: Select all
If "[play]" != "true"
    SetVar [play] "true"
Else
    SetVar [play] "false"
EndIf


Here the variable "play" swaps between "true" and "false" on each button click as it should do.

Any thoughts?

Thank's
User avatar
PaulTomo
 
Posts: 62
Joined: Tue Apr 28, 2009 1:15 am
Location: UK

Re: Javascript if else issue

Postby Neosoft Support » Mon Feb 16, 2015 12:10 pm

I think the problem is that the way you're referencing the variable "play" in your JavaScript code. NeoAppBuilder variables exist in their own "scope". In order to access them from JavaScript you must prefix the variable's name with "$rootScope." This tells JavaScript where to find the variable. Otherwise, JavaScript will either treat it as local to the function or global to the browser - both of which are outside the scope of NeoAppBuilder.

Try replacing your JavaScript code with this:

Code: Select all
BeginJS
var audioElement = document.createElement('audio');
{
  if ($rootScope.play != true) {
    audioElement.setAttribute('src', 'http://mywebaddress/myaudio.mp3');
    audioElement.play();
    $rootScope.play = true;
  } else {
    audioElement.pause();
    $rootScope.play = false;
  }
}
EndJS
NeoSoft Support
Neosoft Support
NeoSoft Team
 
Posts: 5602
Joined: Thu Mar 31, 2005 10:48 pm
Location: Oregon, USA

Re: Javascript if else issue

Postby PaulTomo » Tue Feb 17, 2015 2:14 am

Many Thanks

Adding a prefix to the variable's name of "$rootScope." sorted out the Javascript if / else condition, which now swaps between the true and false on a button press as expected but what I thought would happen with the audio file by using the JS audioElement.play(); and audioElement.pause(); elements doesn't seem to work. The Audio file plays fine but does not pause!

Now when the button is clicked the audio file starts to play, nothing happens on the second click but on every other click it plays a second, third, forth and so on, instance of the audio file. I have searched through lots of forums, all of which show the process to start and stop audio, some even give examples but for some reason I can't get it to function at all.

I'll keep working on it, as I'm sure it must be possible.

Thanks again
User avatar
PaulTomo
 
Posts: 62
Joined: Tue Apr 28, 2009 1:15 am
Location: UK

Re: Javascript if else issue

Postby Gaev » Tue Feb 17, 2015 6:31 am

PaulTomo:

I have not had the time to try this out on my machine ... but it looks like you are "creating a new instance of an audio element with each click of the button" ... hence, when you invoke audioElement.pause();, it is being applied to the new instance (which is already in a paused state.

Try and place these commands ...
Code: Select all
var audioElement = document.createElement('audio');
audioElement.setAttribute('src', 'http://mywebaddress/myaudio.mp3');
... outside of the code triggered with each click of the button ... perhaps in the "app start" event ? ... or attached to a separate button ... after that, the click event of your first button would only invoke the .play() and .pause() methods.

Click on the buttons labelled "Try it yourself" on these pages ... http://www.w3schools.com/tags/av_met_play.asp and http://www.w3schools.com/tags/av_prop_src.asp ... to see the code and behaviour of the video element (should work similarly with the audio element).


Also, take a look at this page ... http://stackoverflow.com/questions/5236 ... javascript ... about the use of comparison operator === vs. == ... even better, avoid using true/false in your own variables ... values like "Playing" and "Paused" would avoid all problematic situations (and easier for mere humans to follow the logic).
User avatar
Gaev
 
Posts: 3728
Joined: Fri Apr 01, 2005 7:48 am
Location: Toronto, Canada

Re: Javascript if else issue

Postby PaulTomo » Tue Feb 17, 2015 11:23 am

Thanks Gaev,

Yes, I had gathered that must be the case. I had also already tried your suggestion and copied the examples you suggested, which sort of worked but not quite how I expected. As for if the 2 statements are put outside of the code, the audio won't play, from what I can see the 3 JS parts have to be together or it just errors with nothing to reference.

Working on some of the examples, I have been able to get it to work if I use and add some HTML to the Buttons HTML input area, similar to the w3schools examples as this was how they achieved it.

Code: Select all
<audio id="myAudio" <source src="http://mywebaddress/myaudio.mp3'         type='audio/mp3"></audio>


Then if I run JS on the same or a second button, I can play and pause the audio on each button press.

Code: Select all
BeginJS
aud_play_pause()
function aud_play_pause() {
  var myAudio = document.getElementById("myAudio");
  if (myAudio.paused) {
    myAudio.play();
  } else {
    myAudio.pause();
  }
}
EndJS


This seems to work now but doing it like this I have to name the individual .mp3 file in the HTML code for it to play, what I would like to do and the reason for using JS, is to be able to add a variable where "myaudio" appears in the HTML part of the web address, so an audio file can then be selected from many, then played and paused via a single button.

So I have now got it working, I just need to understand how to add a JS variable to the web address in the HTML part if that's possible?
User avatar
PaulTomo
 
Posts: 62
Joined: Tue Apr 28, 2009 1:15 am
Location: UK

Re: Javascript if else issue

Postby Gaev » Tue Feb 17, 2015 1:46 pm

I have to name the individual .mp3 file in the HTML code for it to play, what I would like to do and the reason for using JS, is to be able to add a variable where "myaudio" appears in the HTML part of the web address, so an audio file can then be selected from many, then played and paused via a single button.

You can set/change the source file associated with an < audio > element updating its src property ...
Code: Select all
document.getElementById("myAudio").src = URL;

... take a look here for details.
User avatar
Gaev
 
Posts: 3728
Joined: Fri Apr 01, 2005 7:48 am
Location: Toronto, Canada

Re: Javascript if else issue

Postby PaulTomo » Wed Feb 18, 2015 10:10 am

Thanks again Gaev

A random selection of mp3's now play, plus they can be paused and played again from the start.

Good job, your last suggestion worked a treat. It's all quite simple when you know what you are doing!
User avatar
PaulTomo
 
Posts: 62
Joined: Tue Apr 28, 2009 1:15 am
Location: UK


Return to General NeoAppBuilder Discussion

Who is online

Users browsing this forum: No registered users and 1 guest

cron