current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.3 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 1 down vote favorite

I have developed a pretty basic audio player on on my website similar to SoundClouds.

I have managed to successfully finish it, and I am starting to clean up all the markup, including (trying) removing all inline event handlers (i.e: onclick="" or onkeyup="").

However, I have come across a bit of a problem in my JavaScript whilst doing this.

It's a bit hard to explain so I'm going to post my JavaScript, then give you an idea of what the problem is:

$(".track-w__trigger").click(function(){
    var tid = $(this).attr('aria-trackid'); // aria-trackid is equal to a random integer created by PHP
    var tiW = 'w' + tid + 'w'; // this is an object (i.e: w3w)
    playPauseButton(this, tiW, ti);
});

function playPauseButton(button, wave, trackID){
    var button = $(button);

    if(wave.isPlaying()){ // the object (w3w.isPlaying())
        button.removeClass("playing");
        wave.pause();
    } else {
        button.addClass("playing"); 
        wave.play();
    }
}

What I used to have was 

<div class="track-w__trigger" onclick="playPauseButton(this, w3w, 3)" id="w3w-trigger"></div>

and now it is:

<div class="track-w__trigger" aria-trackid="3" id="w3w-trigger"></div>

As you can see in the second block of code. w3w is an object. However, because I have set it using my click function in a separate script using string quotes. JavaScript has gone ahead and made it a string.

So now when I use wave.isPlaying() for example; it does nothing.

I have no idea how to fix this, and no result on Google will help me. Any help in fixing this issue would be greatly appreciated,

Thanks!

EDIT:

This is where & how w3w is set:

var w3w = Uki.start({
    // e.t.c
});
share|improve this question
    
what is w3w? and where is setted? – Parth Trivedi 18 hours ago
    
@ParthTrivedi one moment, editing my code – badjuju 18 hours ago
    
@ParthTrivedi edited! – badjuju 18 hours ago
    
you have set it in this place as a string isn't it ? var tiW = 'w' + ti + 'w'; and what is the ti variable will it change dynamically – GraveyardQueen 18 hours ago
    
@GraveyardQueen yeah, but because it has quotes, it is no longer an object. If I were to do var tiW = w + ti + w, it would give me an error. – badjuju 18 hours ago
up vote 1 down vote accepted

Use eval wave = eval(wave); to evaluate the string as a function

or use a safer way 

wave = window[wave];

https://jsfiddle.net/zmr412q7/

share|improve this answer
    
eval is strongly discouraged. – Joe 17 hours ago
up vote 0 down vote

Instead of having each object as a seperate variable, create an object that contains each object at the id representing the N in wNw. Ex:

var wNw = {};

// represents w1w
wNw[1] = (Uki.start({
    // e.t.c
}));

// represents w17w
wNw[17] = (Uki.start({
    // e.t.c
}));

// represents w3w
wNw[3] = (Uki.start({
    // e.t.c
}));

This gives you an object that looks like:

{
   1: object_that_was_w1w
   17: object_that_was_w17w
   3: object_that_was_w13w
}

And then your click handler looks like this:

$(".track-w__trigger").click(function(){
    var tid = $(this).attr('aria-trackid'); // aria-trackid is equal to an integer of 1 to 5
    var tidNum = parseInt(tid);
    playPauseButton(this, wNw[tidNum], ti);
});
share|improve this answer
    
This won't work unfortunately :/ Due to PHP generating those numbers as the page is scrolled down (making the integer of 5 increase). I have made an edit to the comment in my post. Sorry – badjuju 18 hours ago
    
updated to meet your new constraint. – Joe 18 hours ago
up vote 0 down vote

You can try something like this,

var tid='w'+5+'w';
var tryout=tid.valueOf();
console.log("getting the object "+tryout)

The valueOf property converts the string to an object

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.