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:
[[collapsible show="+ show framework" hide="- hide framework"]]
This is the code that does all of the hard work. You should never need to use this code.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>MP3 Player</title>
</head>
<body>
<script language="JavaScript" src="http://snippets.wdfiles.com/local--files/code:mp3/audio-player.js"></script>
<script type="text/javascript">
var url_params = /^#([^#]*)(#autoplay)?$/;
var match = url_params.exec(unescape(window.location.hash));
if (match) {
document.write('<object type="application/x-shockwave-flash" data="http://snippets.wdfiles.com/local--files/code:mp3/player.swf" id="audioplayer1" height="24" width="290">');
document.write('<param name="movie" value="http://snippets.wdfiles.com/local--files/code:mp3/player.swf">');
document.write('<param name="FlashVars" value="playerID=1&soundFile=' + match[1]);
if (match[2]) {
document.write('&autostart=yes');
}
document.write('">');
document.write('<param name="quality" value="high">');
document.write('<param name="menu" value="false">');
document.write('<param name="wmode" value="transparent">');
document.write('<i>Flash has been disabled, or is not installed. This MP3 player requires <a target="_blank" href="http://get.adobe.com/flashplayer/">Flash</a> to function.</i>');
document.write('</object>');
}
else
document.write('<i>Invalid URL syntax</i>');
</script>
<noscript>
<i>Your Javascript has been disabled. This MP3 player requires Javascript to function.</i>
</noscript>
</body>
</html>
Don't worry if looking at that scares you. You actually don't need to use it in your wiki at all.
Code
[[div class="error-block"]]
Flash Player is no longer supported! Use https://snippets.wikidot.com/code:html5player instead.
[[/div]]
[!--
[[iframe http://snippets.wdfiles.com/local--code/code:mp3#{$URL}{$autoplay} frameborder="0" scrolling="no" width="320px" height="40px"]]
--]
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
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…
~ Leiger - Wikidot Community Admin - Volunteer
Wikidot: Official Documentation
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.
~ Leiger - Wikidot Community Admin - Volunteer
Wikidot: Official Documentation
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 :)