By James Kanjo
Description
[[note]] Flashplayer ended 2020! See here the new code in html5 to use![[/note]]
As major web browsers remove support for flash, users wishing to embed audio should not use this component, but rather the HTML5 version.
Any existing uses of this component should move over as soon as possible.
Example page using the new component.
Code using the new component looks like this:
[[include :snippets:html5player
type=audio |
url=[URL HERE]
]]
OLD:
With the traditional MP3 Player, you need to manually inject your MP3's url into the html code. This also means you need an individual code block for each song you want to play.
This is very tedious, and frankly, too complicated for less advanced users. So I've expanded upon the original code, and made it possible to dynamically play songs as specified in the URL:
Code
[[include :snippets:mp3
|URL=The link to your MP3 file goes here
]]
To make the player automatically start playing when the page loads, just add an |autoplay= variable, and specify it to be true. For example:
[[include :snippets:mp3
|URL=http://squark.wdfiles.com/local--files/dev:8/1.mp3
|autoplay=Yes
]]
The autoplay variable accepts both “true” and “yes” inputs
In action
Thanks to tsangk for this great snippet: conditional-blocks
text above inserted with:
[[include :snippets:if START |unique=1|type=equal|var1=%%name%%|var2=conditional-blocks]]
**##red|Thanks to tsangk for this great snippet:##** [[[code:conditional-blocks]]]
[[include :snippets:if END]]
Other snippets posted by James Kanjo
Extended NewPage Module - 15 Jul 2014 15:08
Specific Users Only Include - 24 Jul 2013 06:16
iframe Redirect - 30 Jul 2012 22:41
Per Category CSS Module - 06 Mar 2012 03:38
Video Player - 16 Feb 2012 01:50
Remove Duplications - 16 Feb 2012 01:39
RegExp Date Wizard - 16 Feb 2012 01:39
"Random Page!" link - 16 Feb 2012 01:35
Quoted Blockquotes - 16 Feb 2012 01:33
NewPage Button - 16 Feb 2012 01:26
JavaScript Addition - 16 Feb 2012 01:14
iframe embed - 16 Feb 2012 01:08
Random Page - 18 May 2011 09:50
Redirect - 11 Feb 2010 10:00
Rate this solution
If you think this solution is useful — rate it up!
As major web browsers remove support for flash, users wishing to embed audio should not use this component, but rather the HTML5 version.
Any existing uses of this component should move over as soon as possible.
Example page using the new component.
Code using the new component looks like this:
[[include :snippets:html5player
type=audio |
url=[URL HERE]
]]
Excellent, just what I was looking for and it works like a charm. Thank you kind sir.
Is there a way to make this repeat?
"Long is the way, and hard, that out of hell leads up to light."
- John Milton; Paradise Lost, BOOK II
You mean loop? No sorry.
λ James Kanjo
Blog | Wikidot Expert | λ and Proud
Web Developer | HTML | CSS | JavaScript
At the time of this post (538 days after the birth of MP3 Player), there are 307 pages on Wikidot using this technology!
λ James Kanjo
Blog | Wikidot Expert | λ and Proud
Web Developer | HTML | CSS | JavaScript
Dear amazing coder who makes like easier for us
I have a request - if you can, can you make the left hand side speaker symbol to control volume when music is played? I saw this feature in other blogging sites and was hoping it would make its way here.
thank you
It would help if you could link to a blog that uses the type of mp3 player you want…
~ Shane (Wikidot Community Admin - Volunteer)
Wikidot: Wikidot Editor, Official Docs
Other: YouTube (gaming, primarily Minecraft)
here is one
http://zeima.wordpress.com/
(always wanting more) I can't seem to be able to put this MP3 Player inside a wiki table cell. E.G.
The use case is: I have a wikidot page with 15 songs (http://churchladies.wikidot.com) and I would like to make a table with 2 columns (the song name and the player widget).
Nevermind … It works if you use the [[table]] … [[/table]] syntax. So it's perfect!
The reason for that is because it's an include. They need to be on their own line.
With the table syntax, my guess is that this doesn't work:
but this does:
… for the same reason as I mentioned above.
So if you run into problems, just make sure it's on it's own line and it should work.
~ Shane (Wikidot Community Admin - Volunteer)
Wikidot: Wikidot Editor, Official Docs
Other: YouTube (gaming, primarily Minecraft)
thx!!!
Wow, that is not just nice. This is excellent.
a BIG thank you
Damn, that's nice. Good job James, you're an awesome h4x0r :)