Welcome to TalkGraphics.com
Page 1 of 2 12 LastLast
Results 1 to 10 of 11
  1. #1
    Join Date
    Aug 2019
    Location
    Tulsa, Oklahoma, USA
    Posts
    116

    Default Music site: how to play and download the music?

    Hi there.

    I'm trying to make a simple website to advertise my music.
    Click image for larger version. 

Name:	bandicam 2020-02-19 15-58-00-218.jpg 
Views:	15 
Size:	50.8 KB 
ID:	126382
    https://pilgrimlodgeoriginals.com/

    I have created, "download" links, but they open up a player which has a little three-dot menu to download it, instead of immediately downloading it.

    I'd like to have a play button that will play the audio in the same window, or possibly a music player widget.
    I'm not sure how to achieve what I'm trying to do in Xara, and I'm not sure that what I want to do is the best way to do it.

    Your opinion and instruction would be very helpful.

  2. #2
    Join Date
    Apr 2018
    Location
    London
    Posts
    173

    Default Re: Music site: how to play and download the music?

    You can create a placeholder for each track using standard CSS audio controls. These controls behave slightly differently in different browsers, but they work for Chrome, Firefox, Edge and IE. All give the option to either download or save the audio

    HTML Code:
    <audio controls>
      <source src="MySong.mp3" type="audio/mpeg">
      <source src="MySong.ogg" type="audio/ogg">
    Your browser does not support the audio element.
    </audio>
    Click image for larger version. 

Name:	Chrome Browser.jpg 
Views:	10 
Size:	24.6 KB 
ID:	126385 Click image for larger version. 

Name:	Firefox Browser.jpg 
Views:	9 
Size:	29.8 KB 
ID:	126386

    Providing you accept you need to pause one audio before starting another this works fine. If you want a really slick 'playlist' solution you're into coding https://codepen.io/BloodyGaming11/pen/MNgoxo. Maybe someone here on TG has a simpler CSS solution for pausing/stopping one audio track before starting another.

    The additional option is to create an Album of the 12 songs, place them in a .zip file and create a link to it. This will get exported in the normal way and will open for the visitor with all songs.

    You can of course add a short slider/ video alongside the song (e.g. https://barnesbowling.org) Check out the Santana 2019 cut!

  3. #3
    Join Date
    Aug 2019
    Location
    Tulsa, Oklahoma, USA
    Posts
    116

    Default Re: Music site: how to play and download the music?

    I see. I've seen a playlist that is able to be placed it here, but it doesn't function with all browsers.

  4. #4
    Join Date
    Dec 2018
    Location
    Australia
    Posts
    805

    Default Re: Music site: how to play and download the music?

    If you plan to have each album on a different page I can offer a .xar file so you can customise the look of the player. The player will pause a playing track when you start a new one and happily add new tracks.

    There is code that forces a download rather than play, but I've yet to find one that is cross browser. Zipping the whole album as Initiostar suggests has been my option.

    Have a look at https://lukemumby.com.au/sessions.htm to see if it's something you may want to pursue. If so, I'll post the files and code.

    @Gary - yes, this is the player that took at least 4 of us to work out before I became comfortable with how it works. The ability to customise the look of the player was important to me.

  5. #5
    Join Date
    Aug 2019
    Location
    Tulsa, Oklahoma, USA
    Posts
    116

    Default Re: Music site: how to play and download the music?

    Quote Originally Posted by Chris M View Post
    If you plan to have each album on a different page I can offer a .xar file so you can customise the look of the player. The player will pause a playing track when you start a new one and happily add new tracks.

    There is code that forces a download rather than play, but I've yet to find one that is cross browser. Zipping the whole album as Initiostar suggests has been my option.

    Have a look at https://lukemumby.com.au/sessions.htm to see if it's something you may want to pursue. If so, I'll post the files and code.

    @Gary - yes, this is the player that took at least 4 of us to work out before I became comfortable with how it works. The ability to customise the look of the player was important to me.
    That sounds wonderful!! Please do!

  6. #6
    Join Date
    Dec 2018
    Location
    Australia
    Posts
    805

    Default Re: Music site: how to play and download the music?

    My method was to upload the 'player page' (I actually did two, desktop and mobile) then create an iframe on the site itself to display the player.
    I manually created a folder called mp3 in public_html and uploaded the individual tracks to that directory. The 'playermain' and 'playermob' were uploaded via Xara to the public_html/player and public_html/playermob directories.

    The coding looks scary, but the vast majority is in Codelandic and if left alone it won't attack you. The red text is the part you will play with. The first blocks of red text cover the look and feel of the player itself and will grab the graphics from the Named Objects included in the .web file. It took me several hours to get my head around it, but I suspect you will conquer the quest in a lot less time. The second red text is simply the name of the tracks and the numerical order in which to display them. The bottom red text is the path to the audio tracks.

    Have fun.

    >>>TG Audio Player.web <<<
    Last edited by Chris M; 21 February 2020 at 03:45 AM. Reason: Changed a path

  7. #7
    Join Date
    Aug 2019
    Location
    Tulsa, Oklahoma, USA
    Posts
    116

    Default Re: Music site: how to play and download the music?

    Oh boy. . .

  8. #8
    Join Date
    Aug 2019
    Location
    Tulsa, Oklahoma, USA
    Posts
    116

    Default Re: Music site: how to play and download the music?

    Not sure how you created an iframe

  9. #9
    Join Date
    Dec 2018
    Location
    Australia
    Posts
    805

    Default Re: Music site: how to play and download the music?

    Quote Originally Posted by Braden View Post
    Not sure how you created an iframe
    Rectangle for Placeholder and the following code in the Head section. iframes are very useful for lots of different applications. They're easy to use so keep somewhere or commit to memory.

    <iframe src="https://lukemumby.com.au/playermob/index.htm" width="100%" height="100%" frameborder="0" scrolling="auto" name="originals" ><p>Your browser does not support iframes.</p></iframe>

    Click image for larger version. 

Name:	Placeholder.jpg 
Views:	10 
Size:	20.6 KB 
ID:	126388

  10. #10
    Join Date
    Dec 2018
    Location
    Australia
    Posts
    805

    Default Re: Music site: how to play and download the music?

    There's an error in the code above. The name Originals is the name of my web page and so it should look like...

    <iframe src="https://lukemumby.com.au/playermob/index.htm" width="100%" height="100%" frameborder="0" scrolling="auto" name="originals" ><p>Your browser does not support iframes.</p></iframe>

    Or just delete the name= bit altogether.

 

 

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •