Jump to content


Photo

Click on an image to play music


  • Please log in to reply
14 replies to this topic

#1 slightlymad

slightlymad

    Dedicated Member

  • Members
  • PipPip
  • 101 posts

WDF Reputation

0
Neutral
  • Gender:Male
  • Location:Sevenoaks, Kent UK
  • Experience:Intermediate
  • Area of Expertise:Designer/Coder

Posted 02 January 2009 - 08:43 PM

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

Blackfoot Hosting

#2 Meshach

Meshach

    Dev Ninja

  • Privileged
  • PipPipPipPipPip
  • 2,464 posts

WDF Reputation

3
Neutral
  • Gender:Male
  • Location:United States
  • Experience:Advanced
  • Area of Expertise:Coder

Posted 02 January 2009 - 08:47 PM

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...

#3 slightlymad

slightlymad

    Dedicated Member

  • Members
  • PipPip
  • 101 posts

WDF Reputation

0
Neutral
  • Gender:Male
  • Location:Sevenoaks, Kent UK
  • Experience:Intermediate
  • Area of Expertise:Designer/Coder

Posted 02 January 2009 - 08:57 PM

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.

#4 slightlymad

slightlymad

    Dedicated Member

  • Members
  • PipPip
  • 101 posts

WDF Reputation

0
Neutral
  • Gender:Male
  • Location:Sevenoaks, Kent UK
  • Experience:Intermediate
  • Area of Expertise:Designer/Coder

Posted 02 January 2009 - 08:57 PM

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.

#5 Meshach

Meshach

    Dev Ninja

  • Privileged
  • PipPipPipPipPip
  • 2,464 posts

WDF Reputation

3
Neutral
  • Gender:Male
  • Location:United States
  • Experience:Advanced
  • Area of Expertise:Coder

Posted 02 January 2009 - 09:04 PM

This might work.

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

Untested.

#6 slightlymad

slightlymad

    Dedicated Member

  • Members
  • PipPip
  • 101 posts

WDF Reputation

0
Neutral
  • Gender:Male
  • Location:Sevenoaks, Kent UK
  • Experience:Intermediate
  • Area of Expertise:Designer/Coder

Posted 02 January 2009 - 09:36 PM

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, 07 February 2010 - 03:54 PM.
added [code] tags


#7 Meshach

Meshach

    Dev Ninja

  • Privileged
  • PipPipPipPipPip
  • 2,464 posts

WDF Reputation

3
Neutral
  • Gender:Male
  • Location:United States
  • Experience:Advanced
  • Area of Expertise:Coder

Posted 02 January 2009 - 10:00 PM

Try this then:

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


#8 slightlymad

slightlymad

    Dedicated Member

  • Members
  • PipPip
  • 101 posts

WDF Reputation

0
Neutral
  • Gender:Male
  • Location:Sevenoaks, Kent UK
  • Experience:Intermediate
  • Area of Expertise:Designer/Coder

Posted 02 January 2009 - 10:33 PM

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...

#9 Meshach

Meshach

    Dev Ninja

  • Privileged
  • PipPipPipPipPip
  • 2,464 posts

WDF Reputation

3
Neutral
  • Gender:Male
  • Location:United States
  • Experience:Advanced
  • Area of Expertise:Coder

Posted 03 January 2009 - 02:17 AM

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.

#10 slightlymad

slightlymad

    Dedicated Member

  • Members
  • PipPip
  • 101 posts

WDF Reputation

0
Neutral
  • Gender:Male
  • Location:Sevenoaks, Kent UK
  • Experience:Intermediate
  • Area of Expertise:Designer/Coder

Posted 03 January 2009 - 03:00 AM

Ah. Right, this should work then...

http://www.entheoswe...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?!

#11 Meshach

Meshach

    Dev Ninja

  • Privileged
  • PipPipPipPipPip
  • 2,464 posts

WDF Reputation

3
Neutral
  • Gender:Male
  • Location:United States
  • Experience:Advanced
  • Area of Expertise:Coder

Posted 03 January 2009 - 05:25 AM

Ok. I'll keep looking.

#12 slightlymad

slightlymad

    Dedicated Member

  • Members
  • PipPip
  • 101 posts

WDF Reputation

0
Neutral
  • Gender:Male
  • Location:Sevenoaks, Kent UK
  • Experience:Intermediate
  • Area of Expertise:Designer/Coder

Posted 03 January 2009 - 12:06 PM

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.

#13 Meshach

Meshach

    Dev Ninja

  • Privileged
  • PipPipPipPipPip
  • 2,464 posts

WDF Reputation

3
Neutral
  • Gender:Male
  • Location:United States
  • Experience:Advanced
  • Area of Expertise:Coder

Posted 03 January 2009 - 05:40 PM

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.

#14 slightlymad

slightlymad

    Dedicated Member

  • Members
  • PipPip
  • 101 posts

WDF Reputation

0
Neutral
  • Gender:Male
  • Location:Sevenoaks, Kent UK
  • Experience:Intermediate
  • Area of Expertise:Designer/Coder

Posted 04 January 2009 - 01:28 AM

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

#15 Meshach

Meshach

    Dev Ninja

  • Privileged
  • PipPipPipPipPip
  • 2,464 posts

WDF Reputation

3
Neutral
  • Gender:Male
  • Location:United States
  • Experience:Advanced
  • Area of Expertise:Coder

Posted 04 January 2009 - 03:29 AM

Wow! Awesome! Glad you got it working.




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users