11 Replies Latest reply: Aug 4, 2012 3:11 PM by Nancy O. RSS

    Toggle play / stop button for Dreamweaver

    S.Solan Community Member

      Hey guys, I've been looking for an answer for a few hours and I can't find one, so here's the deal:

       

      I have a long list of .mp3 songs (about 100).  I'd like to add a play / stop toggle button next to each song (like iTunes) so the viewer can play and stop the song (like a preview of the song).  What is the best way to do this in Dreamweaver CS4?  Do I need to create this in Flash then import into DW?

       

      Thanks,

       

      Solan

        • 1. Re: Toggle play / stop button for Dreamweaver
          markerline Community Member

          1) you can do this in Flash and it's not that hard.  Do a search engine search for Flash MP3 Player and you will find some tutorials

           

          2) you can do this without Flash and just use HTML5 but again you will have to do a websearch for HTML5 MP3 Player.  There are plenty of tutorials.  If you choose this method you will have to use Javascript or jQuery for the logic part of the play and stop function.  Otherwise in Flash you will be using ActionScript 3.0 .

          • 2. Re: Toggle play / stop button for Dreamweaver
            S.Solan Community Member

            Hey Markline,

             

            Thanks for your response.  How could I make sure that each song doesn't load along with the page each time?  That would take a lot of time.

             

            Thanks,

             

            Solan

            • 3. Re: Toggle play / stop button for Dreamweaver
              markerline Community Member

              I'm not sure I understand your question.  Are you assuming that each time the page loads every song will play one after the other without the user interacting with the page?  Or are you asking that the page would preload every song prior to hitting the play button by the user?

               

              If it's the latter, not to worry.  The javascript (for html5) and actionscript code (if you're using flash) can be written such that nothing loads unless the user hits the play button.  With fast internet connections preloading won't be a big problem and once the page has been cached and the song has been cached it won't have to preload again if the user decides to replay the song.  The only thing you would have to worry about is if the user deletes the browser's cache while interacting with your page.

              • 4. Re: Toggle play / stop button for Dreamweaver
                S.Solan Community Member

                Markerline,

                 

                Thanks yes it was the latter.  I was worried about the preloading of all songs - good to know about the Flash & HTML options. 

                 

                Here's how things have progressed so far in a nutshell: 

                 

                I've created a page in Dreamweaver and imported the .swf files from Flash (the play/stop button) for each song.  They seem to work well with one exception:  I need the current playing song to stop playing if the user presses play on another song.  Would this be code done in Flash (for each play button) or would this we done in Dreamweaver (for the whole page)?  Lastly, what would that code be?

                 

                Thanks,

                 

                Solan

                • 5. Re: Toggle play / stop button for Dreamweaver
                  markerline Community Member

                  To answer those questions you would best be off to the Flash Professional Forum (in fact there is an ActionScript 3.0 forum) and the experts there can help you out with the necessary code.  I am saying this since you have already begun to do the work in Flash in terms of interactivity rather than choosing to do a javascript enabled button using HTML5 and javascript.  You would not do this stuff in Dreamweaver unless you were to code in javascript rather than actionscript.

                  • 6. Re: Toggle play / stop button for Dreamweaver
                    S.Solan Community Member

                    OK.  I'll post over there.  But just for the sake of asking, which method do you think is more worth while Flash or HTML5 (given the fact that iPad & iPhone can't view Flash)?

                     

                    Thanks,

                     

                    Solan

                    • 7. Re: Toggle play / stop button for Dreamweaver
                      markerline Community Member

                      That's a very good question.  The first question I have for you is are all of your songs your own copyright-owned songs?  In other words did you create the entire content of each song? Or are you licensed to distribute the songs?  (distribution includes posting them online)

                       

                      If so, then read on.

                       

                      What I would do is either

                      1)  Create a Flash version which is much more robust in this day than the HTML5 players that I've seen.  You can use an XML list (which you can probably do for HTML5 as well but I haven't seen good examples) and thus populate your mp3 player dynamically so that you don't have to recode in Flash every time you want to change your playlist.  Then provide a download link for each song for people viewing on iPad or iPhone or Android Jellybean (which won't be supporting Flash Player either I have heard)

                      2)  Create an entirely HTML5 version

                      3)  Post your songs on iTunes and AmazonMP3 using a music distribution service and sell your albums.

                      4) Use a hosting service for music files such as "soundclick" or "soundcloud"

                      • 8. Re: Toggle play / stop button for Dreamweaver
                        S.Solan Community Member

                        Markline,

                         

                        Great suggestions.  I've seen a few really nice Flash players for XML playlists but what I'm interested in is an individual preview button for each song (like in iTunes).  For instance there could be a list of 10 songs and next to each would be an individual play button that would preview about 10 seconds of each song. However,the last piece of the code puzzle would be a few lines of code that would stop a currently playing song if another play button was pressed by the user (to prevent overlap of the playing songs).

                         

                        So with that specific information, woudl I be better off going the Flash route or HTML5? 

                         

                        Thanks I really appreciate your input.

                         

                        Solan

                        • 9. Re: Toggle play / stop button for Dreamweaver
                          markerline Community Member

                          you can do all of that with both Flash with Actionscript 3.0 and HTML5 with Javascript.  But you have to do the research yourself to see if you find examples that would suit you best.  I find it easier in Flash because I'm more comfortable with it but many people are moving away from Flash.  If you want it viewed on a tablet i would recommend HTML5.  If it's just for a desktop or laptop then Flash.  I can't give you the code because it's involved and someone in the Flash section of this forum can be of better assistance than myself.  It is not difficult to implement a scenario where the new song stops the old song from playing and starts to play itself.  The suggestions I gave above were not just picked out of thin air but carefully thought of from experience.

                          • 10. Re: Toggle play / stop button for Dreamweaver
                            S.Solan Community Member

                            I get it and appreciate your thoughts.  I think you're right a lot of people are moving away from Flash - which really is the BIG question.  To stick with it or to move on to HTML5 which isn't really as robust as Flash is at this point.  Thanks again. 

                             

                            Solan

                            • 11. Re: Toggle play / stop button for Dreamweaver
                              Nancy O. CommunityMVP

                              Flash is practically a dead web technology.  Adobe no longer supports Flash development on mobile devices.

                               

                              That said, if Adobe has abandoned Flash for mobiles, ask yourself who your site's target audience is.   I'll admit, Flash audio is nicer than HTML5<audio> but in the end, it doesn't matter if nobody can hear it.

                               

                              Another way to look at it:  Are you building this site for a short term existence (6-12 mos) or a long term one (2-3 years)?

                               

                              If long term, use HTML5.

                               

                               

                              Nancy O.