How to add audio into Muse (not in the background)?

[Guest]

I'm making a website for a music producter, and need to add like ten or twenty music MP3's into one page, with some kind of music player (play, pause, stop). How can I do this best?

Thanks!

[jgrummel · Accepted solution]

What you are looking for is an HTML5 <audio> element.

<audio controls="controls">

   <source src="mysong.mp3" type="audio/mp3">

</audio>

Please check this W3 Schools info page:

http://www.w3schools.com/html/tryit.asp?filename=tryhtml_audio_all

Hope this helps!

Julia

[Guest]

Hello Julia,

Thank you for your help, sorry for my late respons.

I guess this only works when I have my website online yet, right? Because the website is not done yet, and I'd like to test these things first in "publish mode" in businesscatalyst before really publishing it at the .com website.

Also, the website you gave me is some different HTML code than you gave me in your post why is that?

I'm very sorry, but I'm not a coder so I have no idea what I'm doing..

Thanks for your response.

[Guest]

Well, I checked it at my own website because that one is already in the air. I pasted the following code:

<audio controls="controls">

   <source src="music/thedissident.mp3" type="audio/mp3">

</audio>

You can see it here: http://www.pkdesigns.nl/music.html

As you can see, the player shows (at the bottom of the page), but doesn't work. I placed the file in a folder called music in my HTML folder. Did I do this right?

Also, it does weird with my lay out, it should be like this: http://www.pkdesigns.nl/contact.html but when I paste the HTML code in it the lay out gets all weird with a white background and screwed up menu.

Please help, thank you!

[Abhishek_Maurya]

The code on the link that Julia has provided suggests that you use atleast two type of formats on the page because all types of audio files are not compatible on all the browsers. For instance mp3 are not compatible with FF and Opera, so having an alternate file type should help in those cases. I have checked the page that you pointed out above and it works in Chrome but not in FF.

Get more information from the document below.

- http://www.w3schools.com/html/html5_audio.asp

- Abhishek Maurya

[Guest]

It works! I put an MP3, OGG and WAV file of every song and not it works in more browsers. Thank you so much for your help you both.

[rob_pennington]

I'm trying to figure this out as well. 

I need to add about 10 songs - do i have to go to object / enter html 10 different times, entering the different songs? 

[e.reed.rogers]

Rob,

I'm in the same boat as you with needing a playlist. I found this tutorial and maybe itwill help you out:

HTML5 Audio part 1 (YouTube Tute)

Ed

[m_nixon]

The best not only solution I found for an embedding an mp3 player in Adobe Muse were those offered at http://www.podsnack.com

To gain access I used my Facebook logon although you can create an account as the case may be.

They offer a range of different types of embedded html5 players from the playlist type to the simple on off button which they can host on your behalf or you can host yourself.

In addition they provide you with a method of creative control over the look and feel of the player.

If they host the player then you might need to subscribe to a Dropbox account where the mp3 tracks are filed.

If you would like to see the player in action go to one of my websites: http://aircraftondisplay.nixonspublishing.id.au and Logon.

I am not connected with podsnack in any way other than I am now a customer and therefore have no reason to promote their offering other than to report to interested users that I had an excellent experiencing dealing with them and it might be worthwhile trialing what they have to offer.

[121onetoone]

I dont know where am i supposed to add the songs, so when i put the name in the code would appear.... im stuck here.. PLEASE HELP!

[e.reed.rogers]

Carol,

Try these links. It demonstrates a couple of ways to play audio files. It should set you on the right path...

3 Different Ways To Embed A Free MP3 Player On Your Website

http://designshack.net/articles/html/four-quick-and-easy-ways-to-embed-mp3-files-into-your-site/

Hope this helps.

Ed

[GemBro]

Sorry, I gotta shout out MuseThemes again on this one ... they have just (this month) released a proper HTML5 MP3 player that is totally simple to use ... and customisizeable ...

I ended up grabbing the whole bundle they are offering for £35 ... bargain ia not the word ... there's loads of quality widgets and Templates in there for the cost ... so pass the cost onto your client even if it's for one widget ...

http://widgets-musethemes.businesscatalyst.com/tb025.html#sthash.H9kxWUuC.dpbs

cheers,

Gem

[e.reed.rogers]

Nice option if you want to pay. However, it's not really that hard to get a player working via the tutorials for free.

[GemBro]

Yep ... I thought that for far too long, until I realised I was spending way too much time searching, playing and editing example codes that don't really work that well and sometimes need to be client specific ... and then solving the problem of cross browser compatibility ... I'm saving (or even earning) more now by using quick and easy widgets because the time saved outways the previous options ... believe me I love free stuff and building my own but these days I don't have that time ... each to their own ...

cheers,

Gem