Solved

Propagating mouse clicks through an object

Posted on 2011-09-28
15
386 Views
Last Modified: 2012-05-12
I'm using an audio player that was implemented with Flash. It displays the selections available and when you click one it begins playing.  I would now also like to show the words for the song when it plays.  But since I don't have access to the Flash code I can't intercept the mouse click and have it display the words.  If I put another object over the player, where I can detect mouse clicks, I block the mouse clicks from being seen by the player and the player doesn't respond by playing the song.  

Does anyone see a way to display the song words when I click the song in the player?

Thanks for any ideas.
Steve
0
Comment
Question by:steva
  • 8
  • 6
15 Comments
 
LVL 29

Expert Comment

by:dgofman
ID: 36720569
Steve, is that possible to share your existing code. I will prefer to get FLA file for reproducing your problem
0
 

Author Comment

by:steva
ID: 36720620
You can see the page at  http://www.upayahouse.com/music/Poets/poets.php .  Since the player is from a third party I don't have the FLA. And anyway, I want the words to appear in a different part of the page than the player.  It seems that what I need is a way to propagate the "click" event to other objects in the DOM, as well as to the player..  
0
 
LVL 29

Expert Comment

by:dgofman
ID: 36720679
What words do you want to display when is playing?
0
Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

 

Author Comment

by:steva
ID: 36720690
I want to display the words to the song that is currently playing. And I would like them to appear in the area below the player.
0
 
LVL 29

Expert Comment

by:dgofman
ID: 36720698
so, you want to display the subtitles (words of the song) how you will synchronize with a music?
0
 

Author Comment

by:steva
ID: 36741861
I just want all the words of the song to be visible while that song is playing.  So if you select the first song in the player it begins playing and a box appears that contains all of the lyrics to that song.
0
 
LVL 29

Expert Comment

by:dgofman
ID: 36813086
if you will set flashvar variable to autoLoad=false (instead true) you will able to get events to JavaScript functions

Add these functions

function onMediaStart(){
            alert("onMediaStart");
      }

      function onMediaStop(){
            alert("onMediaStop");
      }
      
      function onMediaPause(){
            alert("onMediaPause");
      }

and modify flashvars to

fontSize=large&strokeColor=000000&playlistXmlPath=playlist.xml&autoPlayNext=false&autoLoad=false
0
 

Author Comment

by:steva
ID: 36814654
dgofman,

Thanks.  What you wrote looks interesting.  But instead of "onMediaStart()" I think I need something like "onTrack1Sart()", "onTrack2Start()".   If you look at the page again since I added some things - http://www.upayahouse.com/music/Poets/poets.php - you can see the effect I'm after.  But instead of clicking the external box to the right of the selection I'd like to be able to have the words appear when the song is selected in the player.
0
 
LVL 29

Expert Comment

by:dgofman
ID: 36816213
That player doesn't such function call onTrack1Sart, onTrack2Start :)
I gave you API of the player how you can track when song starts
0
 

Author Comment

by:steva
ID: 36816681
So it looks like I need to go a different route, or maybe stay with what I have so far.

Just curious, how did you determine what functions were available in the PremiumBeat player?
0
 
LVL 29

Expert Comment

by:dgofman
ID: 36817026
You have three options
1) wait if someone give you better example
2) modify playlist.xml to some servlet what will registered on the backend the last user request to the file (for example using Java servlet) and when you will get JavaScript call make a request to the server using AJAX to get user selected file name
3) Accept my answer #36813086, because I gave you an answer how to "Propagating mouse clicks through an object" (intercept) and open a new thread "How to determinate selected song name?
And in this thread I will give you another solution how you can listen dispatch events from your player without using JavaScript and any servlets. It takes for me to go to different direction what I implemented now. That reason why I would like to split this question.
0
 

Author Comment

by:steva
ID: 36853764
Your 36813086 response did not answer my question.  It described a way  to sense when the media starts, stops, or pauses,  but this is not the same as propagating through the mouse click, with all of its parameters, including its x and y values, which I need to determine the actual selection.  

If you describe a way to determine which song was clicked I'll be glad to give you the points.

 
0
 

Accepted Solution

by:
steva earned 0 total points
ID: 37051471
I have solved this myself.  I purchased the Longtail JW player which has excellent documentation and excellent support. With this player  I was able to receive and process the end-of-track events and synchronize the music to the words.
0
 

Author Closing Comment

by:steva
ID: 37075000
Sorry for not giving out the points but I had to eventually solve this myself.
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Preface This is the third article about the EE Collaborative Login Project. A Better Website Login System (http://www.experts-exchange.com/A_2902.html) introduces the Login System and shows how to implement a login page. The EE Collaborative Logi…
This article discusses four methods for overlaying images in a container on a web page
Illustrator's Shape Builder tool will let you combine shapes visually and interactively. This video shows the Mac version, but the tool works the same way in Windows. To follow along with this video, you can draw your own shapes or download the file…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

860 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question