Jump to content
Sign in to follow this  
slightlymad

Click on an image to play music

Recommended Posts

I'm designing a wedding website for my daughter, and I want an mp3 to play when an image is clicked. I don't want any sort of player to appear when the image is clicked, I just want my MP3 to start playing. Ideally, I'd like the music to stop when the image is clicked a second time.

 

I'm throwing 'best practice' (and good taste) out of the window, since the site will only be seen by family and friends.

 

I've been struggling for days with this, Googling for scripts that either didn't work or that I don't understand how to configure (Soundmanager, for example) or using deprecated code that crashed my browser. I've now given up and I'm hoping someone here can help me.

 

I have no programming knowledge so I'm afraid I will need some hand-holding...

 

Marie

Share this post


Link to post
Share on other sites

Niiiice website.

 

I'm thinking the music on image click is a bad idea... Most people won't think to click it again they'll be thinking 'hmmm... How do i turn this music off i better close the window'.

 

Anyways, that's just my opinion...

Share this post


Link to post
Share on other sites
Niiiice website.

 

I'm thinking the music on image click is a bad idea... Most people won't think to click it again they'll be thinking 'hmmm... How do i turn this music off i better close the window'.

 

Anyways, that's just my opinion...

 

The music would only play when the user clicks on the photo, not when the page loads. Sure, a few people won't think to click but I'm thinking that a lot of users will hover over the photo, see that it's a link and expect it to open to a larger photo... instead, they'll get "Going to the Chapel". It's my own touch of humour that I don't expect will meet with approval but I still want to do it.

 

Thanks for the nice comment about the website.

Share this post


Link to post
Share on other sites
Niiiice website.

 

I'm thinking the music on image click is a bad idea... Most people won't think to click it again they'll be thinking 'hmmm... How do i turn this music off i better close the window'.

 

Anyways, that's just my opinion...

 

The music would only play when the user clicks on the photo, not when the page loads. Sure, a few people won't think to click but I'm thinking that a lot of users will hover over the photo, see that it's a link and expect it to open to a larger photo... instead, they'll get "Going to the Chapel". It's my own touch of humour that I don't expect will meet with approval but I still want to do it.

Share this post


Link to post
Share on other sites

This might work.

 

<img src="image.gif" alt="Image description - Play music" onclick="document.getElementById('embMusic').src='music.mp3';">

 

Untested.

Share this post


Link to post
Share on other sites
This might work.

 

<img src="image.gif" alt="Image description - Play music" onclick="document.getElementById('embMusic').src='music.mp3';">

 

Untested.

 

Thanks very much, Meshach, but I'm afraid it doesn't work...

 

<img src="images/matt-and-katie2.jpg" alt="Play music" onclick="document.getElementById('embMusic').src='dixie.mp3';">

Edited by Sam G
added [code] tags

Share this post


Link to post
Share on other sites

Try this then:

 

<img src="images/matt-and-katie2.jpg" alt="Play music" onclick="document.getElementById('EMBEDMusic').href='dixie.mp3';">

Share this post


Link to post
Share on other sites
Try this then:

 

<img src="images/matt-and-katie2.jpg" alt="Play music" onclick="document.getElementById('EMBEDMusic').href='dixie.mp3';">

 

Still no luck I'm afraid...

Share this post


Link to post
Share on other sites
Ah. Right, this should work then...

http://www.entheosweb.com/website_design/play_sound.asp#

 

Just swap out the text for an image...

 

Let me know if this works.

 

Thanks.

 

Thanks, Meshach, I really appreciate the trouble you're going to. Unfortunately I think this is an example of the deprecated coding that I mentioned in my opening post. I imagine that it only works in older browsers, as it doesn't work at all in Firefox and in IE6 a new page opens showing Real Player - I haven't tried it in IE7.

 

Looking in my Dreamweaver CS3 Behaviors panel (under "~deprecated") there's a "Play Sound" event, which inserts exactly the same script that your link gives.

 

Thank you for your willingness to help but we're on the wrong track I'm afraid. You'd think it would be easy but it's evidently more complex than might be supposed. I'm hoping someone else has had this problem and can provide the solution... anyone?!

Share this post


Link to post
Share on other sites
Ok. I'll keep looking.

 

Bless you, Meshach - I'm all Googled out, having tried every search term I can think of. Soundmanager2 looked hopeful, but it's scant on instructions for the non-programmer and I think it's overkill for my needs.

Share this post


Link to post
Share on other sites

Ok, so I did some more research and I'm pretty sure the only way you can do this is to use flash... So if you have flash just put your image, and add this code in your actionscript panel:

 

on(rollOver) {
name of sound = new Sound()
name of sound.attachSound("name in library")
_root.name of sound.start()
}

 

Then embed the SWF file in your webpage.

 

Good luck.

Share this post


Link to post
Share on other sites
Ok, so I did some more research and I'm pretty sure the only way you can do this is to use flash... So if you have flash just put your image, and add this code in your actionscript panel:

 

on(rollOver) {
   name of sound = new Sound()
   name of sound.attachSound("name in library")
   _root.name of sound.start()
  }

 

Then embed the SWF file in your webpage.

 

Good luck.

 

Many thanks for your perseverance, Meschach. I struggled with Flash but my limited knowledge prevented me from getting it to work. Good news, however - after much trial and error I've managed to configure Soundmanager (mentioned above) and IT WORKS!! Go see!

 

Thanks again for all your help.

 

Best,

Marie

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing

    No registered users viewing this page.

  • Member Statistics

    • Total Members
      58,574
    • Most Online
      4,970

    Newest Member
    David Rodriguez
    Joined
  • Forum Statistics

    • Total Topics
      65,793
    • Total Posts
      453,274
×