Mp3 and video player

By Squark Squark

You may want to consider an easier way to do this: MP3, Video

Description

I have used a well-known "hack" of html scripting, submitted by Helmut_pdorf Helmut_pdorf to insert mp3 and video player on my own website, so it can play the files I have uploaded to a page on Wikidot.

How to do it?

  • For mp3 player go to the http://www.squark.wikidot.com/dev:8 and download attached files (swf and js)
  • For video player go to the http://www.squark.wikidot.com/dev:9 and download attached files (swf and js)
  • Upload those files on your page and also and also upload media files (mp3 for mp3 player and flv for video player).
  • Add this code to your page:

Code

Mp3 player

[[code type="html"]]
<html><head><metahttp-equiv="Content-Type"content="text/html; charset=iso-8859-1"/><title>Squark mp3 Player</title></head><body><scriptlanguage="JavaScript"src="http://squark.wdfiles.com/local--files/dev:8/audio-player.js"></script><objecttype="application/x-shockwave-flash"data="http://squark.wdfiles.com/local--files/dev:8/player.swf"id="audioplayer1"height="24"width="290"><paramname="movie"value="http://squark.wdfiles.com/local--files/dev:8/player.swf"><paramname="FlashVars"value="playerID=1&amp;soundFile=http://squark.wdfiles.com/local--files/dev:8/1.mp3"><paramname="quality"value="high"><paramname="menu"value="false"><paramname="wmode"value="transparent"></object></body></html>
[[/code]]
 
[[iframe http://squark.wikidot.com/dev:8/code/1 frameborder="0" scrolling="no" width="320px" height="40px"]]

Remember to change paths for swf, js files and your own mp3 file you have uploaded.
You can envelope code block by [[collapsible show=" " hide=" "]] ... [[/collapsible]] tags to hide it on your page.

Video player

[[code type="html"]]
<html><head><metahttp-equiv="Content-Type"content="text/html; charset=iso-8859-1"/><title>Squark mp3 Player</title></head><body><pid='preview'>The player will show in this paragraph</p><scripttype='text/javascript' src='http://squark.wdfiles.com/local--files/dev:9/swfobject.js'></script><scripttype='text/javascript'>
var s1 = new SWFObject('http://squark.wdfiles.com/local--files/dev:9/player.swf','player','400','300','9');
s1.addParam('allowfullscreen','true');
s1.addParam('allowscriptaccess','always');
s1.addParam('flashvars','file=http://squark.wdfiles.com/local--files/dev:9/video.flv');
s1.write('preview');
</script></body></html>
[[/code]]
 
[[iframe http://squark.wikidot.com/dev:9/code/1 frameborder="0" scrolling="no" height="320px" width="440px"]]

It's analogue to the mp3 player. Just change the absolute path of the swf, js and your own flv file you have uploaded.

In action

Mp3 player

[フレーム]

Video player

[フレーム]

For more information refer to:


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 Squark

Teachertube - 06 Jun 2021 03:45
Voicethread - 16 Feb 2012 01:51
Vimeo - 16 Feb 2012 01:51
Slideboom - 16 Feb 2012 01:42
Schooltube - 16 Feb 2012 01:40
Reflections - 16 Feb 2012 01:39
Playlist - 16 Feb 2012 01:31
Picasaweb - 16 Feb 2012 01:30
Ohloh - 16 Feb 2012 01:27
Js Kit Ratings - 16 Feb 2012 01:15
Gametrailers - 16 Feb 2012 01:03
Flickr Video - 16 Feb 2012 01:01
Dailymotion - 15 Feb 2012 00:42
Collapsible Block Unleashed - 15 Feb 2012 00:33
Blip TV - 15 Feb 2012 00:26


Rate this solution

If you think this solution is useful — rate it up!

rating: +11
page 1 of 21
doesnt work :(
sethnoodles sethnoodles 04 Mar 2023 18:44

can someone update it pls?


Sethnoodles
Founder of Super Binary Games

by sethnoodles sethnoodles , 04 Mar 2023 18:44
Re: doesnt work :(

As for the Video player, it's charmingly simple… if you can get the embed code from the video you wish to embed.

[[embedvideo}]
paste the embed code for the video here (Google Video, YouTube, Revver, Dailymotion) but be sure to paste the embed code, not the URL code. 
[[/embedvideo}]

5
"But as for me and my house, we shall serve the Lord."
by Director Erzahler Director Erzahler , 20 Sep 2024 01:51
Re: doesnt work :(

Replaying to myself. This doesn't work.
Instead, to do this, put the Embed code between html tags,

[[html]]
Embed code
[[/html]]

5
"But as for me and my house, we shall serve the Lord."
by Director Erzahler Director Erzahler , 27 Sep 2024 03:09
JavaScript
Clairvoyance Clairvoyance 29 Jul 2010 19:15

Execuse me, I want to ask a question about JavaScript.

I tried to upload another audio player swf file but couldn't make it to work. I guess it's because of incorrect JavaScript.

So if I want to use an audio player, for example like this one: http://flash-mp3-player.net/medias/player_mp3_maxi.swf , then what will be the correct JavaScript for it? Or can somebody teach me how to create the JavaScripts which may work with other audio players?

Thank you very much in advance!!!

by Clairvoyance Clairvoyance , 29 Jul 2010 19:15
Volume
Berdusk Berdusk 14 Jun 2010 14:30

Is there a way to change the default volume percentage used for visitors to the page in the mp3 player? I don't see anything that's readily visible as a means of doing so. :(

Any help would be appreciated - Thanks. :)

by Berdusk Berdusk , 14 Jun 2010 14:30
Works, but how to add name?
HobStarCS HobStarCS 17 Jul 2009 07:35

In the example for the audio, when you click on the play button, is says "The Perfect Circle" How can this be defined? I can't see where to do this!

by HobStarCS HobStarCS , 17 Jul 2009 07:35
Re: Works, but how to add name?
Squark Squark 17 Jul 2009 07:59

It's not defined. The player takes the ID3 tag from the mp3 file to create the Title and Name of the song.

by Squark Squark , 17 Jul 2009 07:59
Re: Works, but how to add name?
HobStarCS HobStarCS 17 Jul 2009 09:12

Thanks for that. :)

by HobStarCS HobStarCS , 17 Jul 2009 09:12
beginner
pwwanted pwwanted 20 Jun 2009 08:18

hello, can you please help me insert my song playlist into my page.

please help me. here's the code that i made from www.imeem.com

<img style="visibility:hidden;width:0px;height:0px;" border=0 width=0 height=0 src="http://counters.gigya.com/wildfire/IMP/CXNID=2000002.0NXC/bT*xJmx*PTEyNDU1MzkyOTM3ODEmcHQ9MTI*NTUzOTMwOTAzMSZwPTE4MDMxJmQ9Jmc9MSZ*PSZvPTAwOTJlYTljNWY2NTQxNmNiOTM2MmY3N2E4MmJhYzlj.gif" /><center><p style="visibility:visible;"><object type="application/x-shockwave-flash" data="http://assets.myflashfetish.com/swf/mp3/mixpod.swf" height="311" width="410" style="width:410px;height:311px"><param name="movie" value="http://assets.myflashfetish.com/swf/mp3/mixpod.swf" /><param name="quality" value="high" /><param name="scale" value="noscale" /><param name="salign" value="TL" /><param name="wmode" value="transparent"/><param name="flashvars" value="myid=23833134&path=2009年06月20日&mycolor=222222&mycolor2=77ADD1&mycolor3=FFFFFF&autoplay=true&rand=0&f=4&vol=100&pat=0&grad=false&ow=410&oh=311"/></object><br><a href="http://www.mixpod.com/playlist/23833134"><img src="http://assets.myflashfetish.com/images/btn-get-tracks.gif" alt="Music" title="Get Music Tracks!" border="0"></a><a href="http://www.mixpod.com" target="_blank"><img src="http://assets.myflashfetish.com/images/btn-create.gif" alt="Playlist" title="Create Your Free Playlist!" border=0></a><a href="http://www.mixpod.com/ringtones/23833134"><img src="http://assets.myflashfetish.com/images/btn-get-ringtones.gif" alt="Ringtones" title="Get Ringtones From This Playlist!" border="0"></a><br />Create a <a href="http://mixpod.com">MySpace Music</a> <a href="http://mixpod.com">Playlist</a> at <a href="http://mixpod.com">MixPod.com</a></p></center>

by pwwanted pwwanted , 20 Jun 2009 08:18
Re: beginner
BlueZero BlueZero 20 Jun 2009 19:57

Try using the iFrame code: http://snippets.wikidot.com/code:include-any-page

You create a html page that has the music working (using the code you posted) and upload the html file to your wikidot site. Then you use the iFrame code so it appears on the front of your site.

by BlueZero BlueZero , 20 Jun 2009 19:57
Here's what I was doing wrong
BlueZero BlueZero 03 May 2009 10:46

For people that can't get this to work after you have uploaded the required 2 files and uploaded the music file and have the code above on the page:

Make sure that in the iframe code, the source is not: squark.wikidot.com/dev:9/code/1

but it is your page: yoursiteaddress/YourPageName/code/1.

Instead, make sure that it is referencing your page with all the code in the code block.

The key here is that you pay attention to the following: /code/1

You need to understand that you put this on the end of the page url for the iframe. /code/1 says to execute the FIRST code block on the page for the music file. You could put another number like 2 if you want to execute the second code block which has a different audio file reference.

I was having problems because I didn't realize that /code/1 was able to execute code block code.

by BlueZero BlueZero , 03 May 2009 10:46
Slight problem
(account deleted) 27 Feb 2009 02:31

Well, I seem to have the player working, it's just I can't get it to play the songs - It spends a large amount of time buffering - I've waited 10 minutes and the song hasn't buffered…

Help?

-XIronManX

by (account deleted), 27 Feb 2009 02:31
The links to the files are not local--files but local-files...
Helmut_pdorf Helmut_pdorf 22 Feb 2009 09:43

1. 2 of the 3 links to the files are not local—files but local-files…( only one hyphen)

2. Coud be this is my browser I see in FF (2) no iframe !
Only in IE (7) - seems to be the used theme - you should change it to another clear one for tests!

3. in IE(7) the swf file of Squark is working , but no tone get out :)


Service is my success. My webtips:www.blender.org (Open source), Wikidot-Handbook.

Sie können fragen und mitwirken in der deutschsprachigen » User-Gemeinschaft für WikidotNutzer oder
im deutschen » Wikidot Handbuch ?

by Helmut_pdorf Helmut_pdorf , 22 Feb 2009 09:43
Where is the iframe -using the /code/1 ?
Helmut_pdorf Helmut_pdorf 22 Feb 2009 09:35

I go to your page - where is the iframe using this code?

(the last line of the code in the snippet…)

EDIT: Now I see it in IE (7) !
EDIT2: Now I can see it with view source … Sorry, forget this point.

But the iframe I cannot see working in FF(2) ! ( the theme ?)


Service is my success. My webtips:www.blender.org (Open source), Wikidot-Handbook.

Sie können fragen und mitwirken in der deutschsprachigen » User-Gemeinschaft für WikidotNutzer oder
im deutschen » Wikidot Handbuch ?

Last edited on 22 Feb 2009 09:45 by Helmut_pdorf
by Helmut_pdorf Helmut_pdorf , 22 Feb 2009 09:35
Can't get it to work
Panzon Panzon 22 Feb 2009 06:59

Hello, I'm having problems with the details of this code. I've uploaded the files and an mp3 but can't get the player to work. Could you look at it and see what's wrong?

http://panzon.wikidot.com/new-projects

by Panzon Panzon , 22 Feb 2009 06:59
page 1 of 21
page revision: 8, last edited: 21 Oct 2016 12:48
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License
Click here to edit contents of this page.
Click here to toggle editing of individual sections of the page (if possible). Watch headings for an "edit" link when available.
Append content without editing the whole page source.
Check out how this page has evolved in the past.
If you want to discuss contents of this page - this is the easiest way to do it.
View and manage file attachments for this page.
A few useful tools to manage this Site.
Change the name (also URL address, possibly the category) of the page.
View wiki source for this page without editing.
View/set parent page (used for creating breadcrumbs and structured layout).

AltStyle によって変換されたページ (->オリジナル) /