Freesound Forums

Hello Everyone!
I've been working on a widget for freesound. Here I will post the codes so you can put the freesound widget in your site or blog.
This is the widget (without the brown background): https://lh3.googleusercontent.com/-YyefPtwRLkA/TWrAnQzT_RI/AAAAAAAAAGM/stAbpSGN3xQ/s1600/Freesound+Widget.png . It's very simple, but I will add some new features in the future. :wink:
Please, not that if you use Internet Explorer, you may have problems with the Freeosund Widget.
The Freesound Widget

It allows you to show your Freesound page. I had the idea to create this widget because of another widget, whose function was to show your YouTube channel. So I thought about create something similar, but for the Freesound Project.
You can install it in your site or blog.

The Code:

<table width="200" cellspacing="1" cellpadding="3" border="0" bgcolor="#8B0000">
<tr>
<td bgcolor="#8B0000">
<font size=1 face="verdana, arial, helvetica">
<b><a href="http://www.freesound.org/index.php"><span class="Apple-style-span" style="color: white; font-family: Georgia, 'Times New Roman', serif; font-size: 20px;">Freesound Project</span></a></b>
</font>
</td>
</tr>
<tr>
<td bgcolor="#CD0000">
<font face="verdana, arial, helvetica" size=1>
<a href="YOUR FREESOUND PAGE URL GOES HERE"><span class="Apple-style-span" style="color: #eeeeee; font-family: Verdana, sans-serif; font-size: 15px;">YOUR NAME GOES HERE</span></a>
</font>
</td>
</tr>
</table>
<div style="overflow:auto;width:170px;height:300px;padding:10px;border:5px solid #CD0000">
YOUR SOUND CODE GOES HERE
</div>

<table width="200" cellspacing="1" cellpadding="3" border="0" bgcolor="#CC0000">
<tr>
<td><font color="#000000" face="arial, verdana, helvetica">
<b>
<div style="text-align: left;">
<span class="Apple-style-span" style="font-size: 10px;"><a href="http://notsafeseries.blogspot.com/"><span class="Apple-style-span" style="color: black;">Freesound Widget by Edgard</span></a></span> <a href="http://notsafeseries.blogspot.com/"><span class="Apple-style-span" style="color: black; font-size: 10px;">http://notsafeseries.blogspot.com/</span></a></div>
</b>
</font></td>

In the code you can see the places ( they are written in red letters ) where you need to put url and change things. Now I will explain what you need to do:

•At the "YOUR FREESOUND PAGE URL GOES HERE", you will put the url of your page. At the "YOUR NAME GOES HERE", you will write the title of your widget. You can write your name or "my freesound page".

•At "YOUR SOUND CODE GOES HERE", you will post your "sound code". Use the following code to creat a "sound code":

<a href="YOUR SOUND URL GOES HERE">YOUR SOUND NAME GOES HERE</a>
<div class="separator" style="clear: both; text-align: center;">
<a href="YOUR SOUND URL GOES HERE" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="YOUR WAVEFORM PREVIEW IMAGE URL GOES HERE" /></a></div>

-At "YOUR SOUND URL GOES HERE", you will put the url to the page of your sound. Note that it is necessary put your sound page url two times in the code.
-At "YOUR SOUND NAME GOES HERE", you will write the name of your sound.
-At "YOUR WAVEFORM PREVIEW URL GOES HERE", you will put the url of the waveform preview image of your sound. You can simply right-click on the waveform image and select "copy image url" and after paste at the code. Note that there is the large waveform preview image and the little waveform preview image. You should take the url of the little image.

-With all the urls in the right place, put it at "YOUR SOUND CODE GOES HERE". Note that you need to make one "sound code" to each of your sounds. There is no limit of "sound codes".

Remember that all urls MUST be in quotes (" ".

____________________________________________________________

:arrow: Well, this is the widget. In the future I will add some new features. Please, report any problem with the code :wink:

Also, sorry if the topic isn't at the right section...

Personalization Options
•Creative Commons License

If you want to put the creative commons license in the widget, use this code:

<table width="200" cellspacing="1" cellpadding="3" border="0" bgcolor="#CC0000">
<tr>
<td><font color="#000000" face="arial, verdana, helvetica">
<b>
<div style="text-align: left;">
<span class="Apple-style-span" style="color: white; font-family: Georgia, 'Times New Roman', serif; font-size: 20px;">License</span></div>
<a href="http://creativecommons.org/licenses/sampling+/1.0/" rel="license" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Creative Commons License" src="http://i.creativecommons.org/l/sampling+/1.0/88x31.png" style="border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px;" /></a>
</b>
</font></td>
</tr></table>

Note that at the place where is written "license", you can change it to other text that matches with your preferences. You can, for example, write "This work is licensed under the Creative Commons license".

Now, you should insert it in the indicated place:

<table width="200" cellspacing="1" cellpadding="3" border="0" bgcolor="#8B0000">
<tr>
<td bgcolor="#8B0000">
<font size=1 face="verdana, arial, helvetica">
<b><a href="http://www.freesound.org/index.php"><span class="Apple-style-span" style="color: white; font-family: Georgia, 'Times New Roman', serif; font-size: 20px;">Freesound Project</span></a></b>
</font>
</td>
</tr>
<tr>
<td bgcolor="#CD0000">
<font face="verdana, arial, helvetica" size=1>
<a href="YOUR FREESOUND PAGE URL GOES HERE"><span class="Apple-style-span" style="color: #eeeeee; font-family: Verdana, sans-serif; font-size: 15px;">YOUR NAME GOES HERE</span></a>
</font>
</td>
</tr>
</table>
<div style="overflow:auto;width:170px;height:300px;padding:10px;border:5px solid #CD0000">
YOUR SOUND CODE GOES HERE
</div>
THE CREATIVE COMMONS LICENSE CODE GOES HERE
<table width="200" cellspacing="1" cellpadding="3" border="0" bgcolor="#CC0000">
<tr>
<td><font color="#000000" face="arial, verdana, helvetica">
<b>
<div style="text-align: left;">
<span class="Apple-style-span" style="font-size: 10px;"><a href="http://notsafeseries.blogspot.com/"><span class="Apple-style-span" style="color: black;">Freesound Widget by Edgard</span></a></span> <a href="http://notsafeseries.blogspot.com/"><span class="Apple-style-span" style="color: black; font-size: 10px;">http://notsafeseries.blogspot.com/</span></a></div>
</b>
</font></td>

Personalization Options
•Change the Background Color

The background color is red by default. However, you change this color. This table ( http://gucky.uni-muenster.de/cgi-bin/rgbtab-en ) may help you. It has all the color values (they are at the fourth column) that you will need to change the background color.
Now, let's see where you should put these color values:

<table width="200" cellspacing="1" cellpadding="3" border="0" bgcolor="#8B0000">
<tr>
<td bgcolor="#first rectangle background color ">
<font size=1 face="verdana, arial, helvetica">
<b><a href="http://www.freesound.org/index.php"><span class="Apple-style-span" style="color: white; font-family: Georgia, 'Times New Roman', serif; font-size: 20px;">Freesound Project</span></a></b>
</font>
</td>
</tr>
<tr>
<td bgcolor="#second rectangle color">
<font face="verdana, arial, helvetica" size=1>
<a href="YOUR FREESOUND PAGE URL GOES HERE"><span class="Apple-style-span" style="color: #eeeeee; font-family: Verdana, sans-serif; font-size: 15px;">YOUR NAME GOES HERE</span></a>
</font>
</td>
</tr>
</table>
<div style="overflow:auto;width:170px;height:300px;padding:10px;border:5px solid #CD0000">
YOUR SOUND CODE GOES HERE
</div>

<table width="200" cellspacing="1" cellpadding="3" border="0" bgcolor="#last rectangle color">
<tr>
<td><font color="#000000" face="arial, verdana, helvetica">
<b>
<div style="text-align: left;">
<span class="Apple-style-span" style="font-size: 10px;"><a href="http://notsafeseries.blogspot.com/"><span class="Apple-style-span" style="color: black;">Freesound Widget by Edgard</span></a></span> <a href="http://notsafeseries.blogspot.com/"><span class="Apple-style-span" style="color: black; font-size: 10px;">http://notsafeseries.blogspot.com/</span></a></div>
</b>
</font></td>

Note that you can also change the background color of the rectangle with the Creative Commons license.

<table width="200" cellspacing="1" cellpadding="3" border="0" bgcolor="#Creatice Commons license rectangle color ">
<tr>
<td><font color="#000000" face="arial, verdana, helvetica">
<b>
<div style="text-align: left;">
<span class="Apple-style-span" style="color: white; font-family: Georgia, 'Times New Roman', serif; font-size: 20px;">License</span></div>
<a href="http://creativecommons.org/licenses/sampling+/1.0/" rel="license" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Creative Commons License" src="http://i.creativecommons.org/l/sampling+/1.0/88x31.png" style="border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px;" /></a>
</b>
</font></td>
</tr></table>

At the indicated places, you will put the color values. For example, with you want a blue background, put this color value : 0000FF . For a yellow background, put this color value: FFFF00 . For a green background: 00FF00 . Remember: the color values must be preceded by # .

•Change the Text Color

Depending of which background color you chose, you may need to change the text color. You can either write the name of the color ( for example: "white" , "black" , "green" , "blu" ) or put the color value. Remember that this table ( http://gucky.uni-muenster.de/cgi-bin/rgbtab-en ) has all the color values.

<table width="200" cellspacing="1" cellpadding="3" border="0" bgcolor="#8B0000">
<tr>
<td bgcolor="#8B0000">
<font size=1 face="verdana, arial, helvetica">
<b><a href="http://www.freesound.org/index.php"><span class="Apple-style-span" style="color: first text color; font-family: Georgia, 'Times New Roman', serif; font-size: 20px;">Freesound Project</span></a></b>
</font>
</td>
</tr>
<tr>
<td bgcolor="#CD0000">
<font face="verdana, arial, helvetica" size=1>
<a href="YOUR FREESOUND PAGE URL GOES HERE"><span class="Apple-style-span" style="color: second text color; font-family: Verdana, sans-serif; font-size: 15px;">YOUR NAME GOES HERE</span></a>
</font>
</td>
</tr>
</table>
<div style="overflow:auto;width:170px;height:300px;padding:10px;border:5px solid #CD0000">
YOUR SOUND CODE GOES HERE
</div>

<table width="200" cellspacing="1" cellpadding="3" border="0" bgcolor="#CC0000">
<tr>
<td><font color="#000000" face="arial, verdana, helvetica">
<b>
<div style="text-align: left;">
<span class="Apple-style-span" style="font-size: 10px;"><a href="http://notsafeseries.blogspot.com/"><span class="Apple-style-span" style="color: last text color;">Freesound Widget by Edgard</span></a></span> <a href="http://notsafeseries.blogspot.com/"><span class="Apple-style-span" style="color:
last text color; font-size: 10px;">http://notsafeseries.blogspot.com/</span></a></div>
</b>
</font></td>

You can also change the text color of the Creative Commons License rectangle:

<table width="200" cellspacing="1" cellpadding="3" border="0" bgcolor="#CC0000">
<tr>
<td><font color="#000000" face="arial, verdana, helvetica">
<b>
<div style="text-align: left;">
<span class="Apple-style-span" style="color: text color; font-family: Georgia, 'Times New Roman', serif; font-size: 20px;">License</span></div>
<a href="http://creativecommons.org/licenses/sampling+/1.0/" rel="license" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Creative Commons License" src="http://i.creativecommons.org/l/sampling+/1.0/88x31.png" style="border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px;" /></a>
</b>
</font></td>
</tr></table>

Do not forget that color values must be preceded by # .

Personalization Options
•Scrolling Page Personalization

The Scrolling Page is where your sounds are. You can do some personalizations:

<table width="200" cellspacing="1" cellpadding="3" border="0" bgcolor="#8B0000">
<tr>
<td bgcolor="#8B0000">
<font size=1 face="verdana, arial, helvetica">
<b><a href="http://www.freesound.org/index.php"><span class="Apple-style-span" style="color: white; font-family: Georgia, 'Times New Roman', serif; font-size: 20px;">Freesound Project</span></a></b>
</font>
</td>
</tr>
<tr>
<td bgcolor="#CD0000">
<font face="verdana, arial, helvetica" size=1>
<a href="YOUR FREESOUND PAGE URL GOES HERE"><span class="Apple-style-span" style="color: #eeeeee; font-family: Verdana, sans-serif; font-size: 15px;">YOUR NAME GOES HERE</span></a>
</font>
</td>
</tr>
</table>
<div style="overflow:auto;width:170px;height:300px;padding:10px;border:5px solid #CD0000">
YOUR SOUND CODE GOES HERE
</div>

<table width="200" cellspacing="1" cellpadding="3" border="0" bgcolor="#CC0000">
<tr>
<td><font color="#000000" face="arial, verdana, helvetica">
<b>
<div style="text-align: left;">
<span class="Apple-style-span" style="font-size: 10px;"><a href="http://notsafeseries.blogspot.com/"><span class="Apple-style-span" style="color: black;">Freesound Widget by Edgard</span></a></span> <a href="http://notsafeseries.blogspot.com/"><span class="Apple-style-span" style="color: black; font-size: 10px;">http://notsafeseries.blogspot.com/</span></a></div>
</b>
</font></td>

At the indicated place, you can edit the values of the scrolling page size, the border size, the border color and other things:

-"width": It defines the width of the scrolling page. Change it to a width that matches with your preferences.
-"height": It defines the height of the scrolling page. Again, change it to a height that matches with your preferences.
-"padding": It defines the distance between the content and the wall of the scrolling page. You can edit it.
-"border": It defines the size of the border and the color of it. Edit it according to your preferences.

•Change the size of the Widget

The last customization option.
Each "rectangle" of the widget has its own width. The height is defined by the size of the text written inside the rectangle.
At the indicated place, put the size you want. ( For example: "200" , "150" , "300" , "400" )

<table width="first rectangle width" cellspacing="1" cellpadding="3" border="0" bgcolor="#8B0000">
<tr>
<td bgcolor="#8B0000">
<font size=1 face="verdana, arial, helvetica">
<b><a href="http://www.freesound.org/index.php"><span class="Apple-style-span" style="color: white; font-family: Georgia, 'Times New Roman', serif; font-size: 20px;">Freesound Project</span></a></b>
</font>
</td>
</tr>
<tr>
<td bgcolor="#CD0000">
<font face="verdana, arial, helvetica" size=1>
<a href="YOUR FREESOUND PAGE URL GOES HERE"><span class="Apple-style-span" style="color: #eeeeee; font-family: Verdana, sans-serif; font-size: 15px;">YOUR NAME GOES HERE</span></a>
</font>
</td>
</tr>
</table>
<div style="overflow:auto;width:170px;height:300px;padding:10px;border:5px solid #CD0000">
YOUR SOUND CODE GOES HERE
</div>

<table width="last rectangle width" cellspacing="1" cellpadding="3" border="0" bgcolor="#CC0000">
<tr>
<td><font color="#000000" face="arial, verdana, helvetica">
<b>
<div style="text-align: left;">
<span class="Apple-style-span" style="font-size: 10px;"><a href="http://notsafeseries.blogspot.com/"><span class="Apple-style-span" style="color: black;">Freesound Widget by Edgard</span></a></span> <a href="http://notsafeseries.blogspot.com/"><span class="Apple-style-span" style="color: black; font-size: 10px;">http://notsafeseries.blogspot.com/</span></a></div>
</b>
</font></td>

Creative Commons license rectangle:

<table width="creative commons license rectangle width" cellspacing="1" cellpadding="3" border="0" bgcolor="#CC0000">
<tr>
<td><font color="#000000" face="arial, verdana, helvetica">
<b>
<div style="text-align: left;">
<span class="Apple-style-span" style="color: white; font-family: Georgia, 'Times New Roman', serif; font-size: 20px;">License</span></div>
<a href="http://creativecommons.org/licenses/sampling+/1.0/" rel="license" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Creative Commons License" src="http://i.creativecommons.org/l/sampling+/1.0/88x31.png" style="border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px;" /></a>
</b>
</font></td>
</tr></table>

Remember to put the same width to all rectangles. Note that, for some reason I don't know why, the width of the scrolling page and the rectangles are diferent, even if you put the same number. So, the scrolling page needs a slightly smaller width than the rectangles.

Bugs

•The sounds don't stay inside the scrolling page

This is a bug I noticed I few days ago. Strangely, the sounds don't stay inside the scolling page. However, this bug seems to happen only in specific Web Browsers, like the Internet Explorer. But, in Google Chrome, this problem doesn't happen, and the scrolling page works correctly. I still don't know if this bug happens in Firefox, Safari, Opera and others Web browser.
It's strange because, well, the codes of this Widget are very simple. I mean, the codes to the widget are these, there are not other options. I use this codes or I don't use anything. If I want a widget that works like the Freesound Widget, but for other things, the codes will be the same. So, I believe that the problem is with the Web Browser, not with the Freesound Widget . Anyway, I will see if there is anything that I can do to fix this.

________________________________________________________________________________________________
I hope you all enjoy this widget!
I will see if I can get a easier way to customize your widget, without need to mess with codes, only chose the color, the text, and the size. Also, I will study the possibilities of make a code that automaticaly create all the "sound codes" and upload them to the widget. But I still don't know If all this is even possible.
Anyway, thanks for using my widget!

Cool widget

Hello! Can you please clarify:

You can simply right-click on the waveform image and select "copy image url" and after paste at the code. Note that there is the large waveform preview image and the little waveform preview image. You should take the url of the little image.

How to get url of waveform images on my freesound?

Thanks!!