passing a variable to javascript

Scriptcase 8 Discussion
#1

I have a grid where users can click on a product record and hear an audio clip using jplayer javascript.
It works fine, but I’m trying to figure out how to do something. I have about 50 different products, each
with a different title, mp3, and poster…please see in green below. I would like to pass a variable, depending
on which product the user clicks on, instead of having this information hard coded. The below script is in
a blank SC app that I call when the user clicks. Hopefully, there is an easy way to do this and thanks for
any ideas!

<script type=“text/javascript”>
//<![CDATA[
$(document).ready(function(){

new jPlayerPlaylist({
    jPlayer: "#jquery_jplayer_1",
    cssSelectorAncestor: "#jp_container_1"
}, [
    {
        title:"Men's Professional - 1st half",
        mp3:"../media/bu111.mp3",
        poster: "../media/pro.set.10pct.jpg"
        
    },
    {
        title:"Men's Professional -  Half Time",
        mp3:"http://www.jplayer.org/audio/mp3/TSP-05-Your_face.mp3",
        poster: "../10pct/pro.set.10pct.jpg"
    },
    {
        title:"Men's Professional -  2nd half",
        mp3:"http://www.jplayer.org/audio/mp3/Miaow-02-Hidden.mp3",
        poster: "../10pct/pro.set.10pct.jpg"
    }

], {
    swfPath: "../../dist/jplayer",
    supplied: "webmv, ogv, m4v, oga, mp3",
    useStateClassSkin: true,
    autoBlur: false,
    smoothPlayBar: true,
    keyEnabled: true,
    audioFullScreen: true
});

});
//]]>
</script>

#2

Or if anyone has another way to play an audio file from a list presented in a grid, I’m all ears!

#3

I remember I tried something like that with Google API. It worked in general but there were some minor issues. I will be working on something similar soon in a new project. You can try to search forums for ‘google api player’ or perhaps general search on the web. There are also 2 other methods (I believe on is an API from Yahoo). Sorry I do not remember all details but I hope at least to pint you into the right direction. I will post some more details if I find the project I user about 2 years ago.

Arthur

#4

Coach, you need to make your code dynamic.

There is a lot of ways to do this, i’ll give a couple of examples.
1)

  • A general function that passes the parameters to the player
function playMusic(mp3. title, poster)
  • You could get this parameters form the DB and build a custom function using onRecord event for example.
  • Make JS play the music!
  • Build the json dinamically (kinda like your code is done) but instead of hardcoding the json you’ll make the PHP do it for you.

<script type="text/javascript">
$(document).ready(function(){

new jPlayerPlaylist({
jPlayer: "#jquery_jplayer_1",
cssSelectorAncestor: "#jp_container_1"
}, [
<?php

foreach(.....)
{
echo "{ title:\"" . $title_var . "\", mp3:\"" . $mp3_var . "\", poster: \"" . $poster_var . "\" }";
}
?>
], {
swfPath: "../../dist/jplayer",
supplied: "webmv, ogv, m4v, oga, mp3",
useStateClassSkin: true,
autoBlur: false,
smoothPlayBar: true,
keyEnabled: true,
audioFullScreen: true
});
});
//]]>
</script>

PS: that green color >_>

#5

Thanks for the ideas…I’m just getting back into this today and will take a look at the APIs…thank your.

#6

Thanks for the ideas.