1. Hello Guest!

    Thank you for visiting the ClubRunner Community website, you can login using your ClubRunner account information by clicking the login link on the top of every page.
    Dismiss Notice

Link to mp3 file

Discussion in 'Website Customization' started by ClarkNK on Sep 22, 2021.

  1. ClarkNK

    By:ClarkNK-  Sep 22, 2021
    Community Member

    Joined:
    Sep 8, 2021
    Messages:
    24
    Likes Received:
    1
    Gender:
    Male
    Occupation:
    Retired
    Location:
    Canandaigua, NY, United States of America
    I have uploaded an mp3 file and an image of a piano. I want the user to be able to click on the piano and have the mp3 fiile play.

    How is this possible (if it is)?
     
  2. Mickey

    By:Mickey-  Sep 22, 2021
    Moderator
    ClubRunner Team

    Joined:
    Jun 10, 2017
    Messages:
    220
    Likes Received:
    43
    Hello Clark,

    Thank you for posting. You can make an image clickable, here are our instructions:
    https://www.clubrunnersupport.com/kb/articles/how-do-i-make-an-image-a-clickable-link

    Therefore you can absolutely link an image to the MP3 file you uploaded. However > I cannot predict how the MP3 file will play. It's very likely going to open the MP3 file either in the same, or in a new window. If you're looking for a "hover" action where you can hover your mouse over the image and play an MP3 - this is custom coding and outside the scope of our support.

    You can view a quick test I did to make sure this works for you - see "MP3 test" here:
    https://portal.clubrunner.ca/9723/Page/contact-john-smith

    If you click the image the MP3 opens in a new window and plays. This is default behaviour - a different behaviour might require custom coding.

    Please post again if you have more questions.
     
  3. Mickey

    By:Mickey-  Sep 22, 2021
    Moderator
    ClubRunner Team

    Joined:
    Jun 10, 2017
    Messages:
    220
    Likes Received:
    43
    Hello Clark,

    Our team has made a suggestion, though please note custom coding would be involved. If you are comfortable with basic HTML coding, you could read about how to setup a simple MP3 audio control device on your webpage, please see:
    https://www.w3schools.com/html/html5_audio.asp

    We are unable to support this article since it's third party, but feel free to ask more questions.
     
  4. ClarkNK

    By:ClarkNK-  Sep 22, 2021
    Community Member

    Joined:
    Sep 8, 2021
    Messages:
    24
    Likes Received:
    1
    Gender:
    Male
    Occupation:
    Retired
    Location:
    Canandaigua, NY, United States of America
    Thank you for the quick reply. I followed the steps you suggested and did turn image into a clickable link. Unfortunately the link causes the mp3 file to download to my computer instead of playing it. What did I mess there?
     
  5. ClarkNK

    By:ClarkNK-  Sep 22, 2021
    Community Member

    Joined:
    Sep 8, 2021
    Messages:
    24
    Likes Received:
    1
    Gender:
    Male
    Occupation:
    Retired
    Location:
    Canandaigua, NY, United States of America
    More -- I just discoverd that in Firefox and Microsoft Edge it works and plays the file, but in Chrome it just downloads. So it seems to be an issue just with Chrome. Thanks.
     
    Last edited: Sep 22, 2021
  6. Mickey

    By:Mickey-  Sep 22, 2021
    Moderator
    ClubRunner Team

    Joined:
    Jun 10, 2017
    Messages:
    220
    Likes Received:
    43
    Hi Clark,

    My first set of instructions were the "simple" set where we follow whatever default behaviour the browser has (either play in the browser window, or download, etc.).

    You could have a (non-clickable) image of the piano, and directly below you could paste the code that would generate the "play/pause" button, here's that link again:
    https://www.w3schools.com/html/html5_audio.asp

    While the Support team can't support custom code - you are free to try it (only if you are comfortable with it of course!). Please do ask more questions if you have any.
     
Top