index.html 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308
  1. <!doctype html>
  2. <html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://ogp.me/ns/fb#">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="x-ua-compatible" content="ie=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
  7. <title>Randio algorithmic radio</title>
  8. <meta name="description" content="Algorithmic real-time internet radio fueled by free software">
  9. <link rel="stylesheet" type="text/css" href="stile.css" />
  10. <meta property="og:image" content="img/randio_s.png" charset="UTF-8"/>
  11. <meta property="og:title" content="Randio Radio"/>
  12. <meta property="og:url" content="http://www.randio.it"/>
  13. </head>
  14. <body>
  15. <div id="logo" >
  16. <div class="pd-style logo" style="width:16em;margin: 3em 0 0 5em;">
  17. <h1 style="margin-left:0.5em;font-size: 3em;font-family: monospace;font-weight: 400;">randio~</h1>
  18. </div>
  19. </div>
  20. <main>
  21. <section id="radio-info">
  22. <div id="radio-wrapper">
  23. <audio controls preload style="margin:auto">
  24. <source src="http://www.randio.it:8000/randio.mp3" />
  25. </audio>
  26. </div>
  27. <div class="info-wrapper">
  28. <div class="pd-style" style="flex: 1 1 100%;width:100%;margin-bottom:1.3em">
  29. <h2 style="margin-left:1em">Composition</h2>
  30. </div>
  31. <div style="width:100%;margin-bottom:1.3em" class="pd-style">
  32. <h3 style="margin-left:1em">Artist</h3>
  33. </div>
  34. <div style="width:100%;" id="piece-text" class="pd-style">
  35. <div id="description-wrapper">
  36. <div id="info-paragraph-wrapper">
  37. <p>
  38. A set of things working together as parts of a mechanism or an interconnecting network; a complex whole.
  39. A set of principles or procedures according to which something is done; an organized scheme or method.
  40. Oxford English Dictionary
  41. For his 1965 composition <i>It's Gonna Rain</i>, Steve Reich designed a generative mechanical system.
  42. Steve Reich: <i>It's Gonna Rain</i> (1965)
  43. It was a system of two tape recorders.
  44. A system of two tape recorders
  45. Reich had made field recordings of speech on tape.
  46. </p>
  47. </div>
  48. </div>
  49. </div>
  50. </div>
  51. </section>
  52. <div>
  53. <input name="tendina" type="checkbox" id="bang" style="opacity:0" checked>
  54. <label class="bang" for="bang"></label>
  55. <h5 style=""><!--about--></h5>
  56. <!--
  57. <input name="tendina" type="radio" id="toggle-1" style="opacity:0">
  58. <label class="about-bar dx" for="toggle-1"></label>
  59. <input name="tendina" type="radio" id="toggle-2" style="opacity:0">
  60. <label class="about-bar sx" for="toggle-2"></label>
  61. -->
  62. <aside id="about">
  63. <div class="accordion-strip">
  64. <a class="accordion-title" href="#about-randio"><h3>About Randio</h3></a>
  65. <a class="accordion-title" href="#listen"><h3>How to listen</h3></a>
  66. <a class="accordion-title" href="#functioning"><h3>How it works</h3></a>
  67. <a class="accordion-title" href="#further"><h3>More information about each piece</h3></a>
  68. <a class="accordion-title" href="#random"><h3>Randomness</h3></a>
  69. <a class="accordion-title" href="#contribution"><h3>How to contribute</h3></a>
  70. <a class="accordion-title" href="#policy"><h3>Policy</h3></a>
  71. <a class="accordion-title" href="#patches"><h3>Patches</h3></a>
  72. <a class="accordion-title" href="#contacts"><h3>Contacts</h3></a>
  73. <a class="accordion-title" href="#other-radios"><h3>Other interesting radios</h3></a>
  74. </div>
  75. <!---https://stackoverflow.com/questions/10865717/multi-column-vertical-scrolling-in-css-javascript-->
  76. <div class="text-wrapper">
  77. <article id="about-randio"><div class="text">
  78. <p>
  79. Radio Randio is an algorithmic in-real-time internet radio. All the music is generated in real-time by algorithms developed using
  80. <a href="http://puredata.info/" target="_blank">Pure Data</a>. We are not associated in any way with Pure Data, but we love it.
  81. We also love open-source software and use it to make the stream possible.
  82. The streaming server is self-maintained by us and at the moment could be not 100%
  83. reliable. We are open to collaboration and we hope to attract artists whishing to share
  84. their patches with us and our listeners.
  85. </p>
  86. </div>
  87. </article>
  88. <article id="listen">
  89. <div class="text">
  90. <p>
  91. To listen Randio, just click play above, there should be a little player. As an alternative you can connect your media player to
  92. <a href="http://www.randio.it:8000/randio.mp3" class="barra" target="_blank">http://www.randio.it:8000/randio.mp3</a>.
  93. It is also possible to download an <a href="http://www.randio.it:8000/randio.mp3.m3u" class="barra" target="_blank">m3u</a>
  94. file or an <a href="http://www.randio.it:8000/randio.mp3.xspf" class="barra" target="_blank">xspf</a>
  95. one.
  96. </p>
  97. </div>
  98. </article>
  99. <article id="functioning">
  100. <div class="text">
  101. <p>
  102. Randio consists of an <a href="http://www.icecast.org/" class="barra" target="_blank">Icecast</a>
  103. server providing an online audio stream and of Pure Data
  104. patches, one for each piece, generating the audio stream. These patches are called by a
  105. scheduler, which is also a patch. Each piece has a minimum streaming time and an additional variable one defined a-priori.
  106. When the patch is called by the scheduler, the total streaming time is computed.
  107. The scheduler calls all the patches one after the other, and at the end of this playlist
  108. it starts over and over again. We prefer to use non-deterministic patches, but determistic ones are also used.
  109. Occasionally, we also stream soundscapes. We share all patches included in our playlist with our contributors.
  110. </p>
  111. </div>
  112. </article>
  113. <article id="further">
  114. <div class="text">
  115. <p>
  116. Each piece is complemented by an info.txt file which contains information about the artist, the piece itself
  117. and the data or samples used to create the piece. If the piece use data released under come kind on creative-commons
  118. license, or other compatible licenses, citations may be found in this file as well. To browse info.txt files follow this link: <a href="http://www.randio.it/info/" class="barra" target="_blank">http://www.randio.it/info/</a>
  119. </p>
  120. </div>
  121. </article>
  122. <article id="random">
  123. <div class="text">
  124. <p>
  125. In Randio each patch is opened and then closed each time it is performed. This process has the side effect that, for each performance, the random numbers generated by Pd's [random] object are always the same. This behavior could be sometimes desirable, as instance when an artist wants to use randomness during the process of composition, but also wants to be sure that its piece will eventually sound as expected.
  126. In other cases different random numbers for each performance are desired, in order to have a slightly different sound for each execution. In the latter case Pd's [random] object alone is not sufficient, it is necessary to change the seed of the random number generator at each boot of the patch.
  127. For this purpose, we here provide two objects to be used when composing a randio piece. The first one is [urandom], which uses [binfile], which in turn is a component of <a href="http://puredata.info/downloads/mrpeach" class="barra" target="_blank">mrpeach</a>
  128. library. Here [binfile] is used to read 1 byte of data from /dev/urandom, a special file capable to supply pseudo-random data in Unix-like operating systems. Another approach is exploited by [trandom], which generates a random seed by using current system time.
  129. Here system time is provided by the [time] object from <a href="https://puredata.info/downloads/zexy" class="barra" target="_blank">zexy</a> library. Both these objects works just like [random] and can be used instead of the traditional [random] object. [urandom] can be downloaded
  130. <a href="randiom/urandom.pd" class="barra" target="_blank">here</a>, while
  131. [trandom] can be downloaded <a href="randiom/trandom.pd" class="barra" target="_blank">here</a>,
  132. feel free to download and use them for your next patch. We tend to do not stream patches without some randomness inside, and contributions without randomness are discouraged.
  133. </p>
  134. </div>
  135. </article>
  136. <article id="contribution">
  137. <div class="text">
  138. <p>
  139. We welcome new artists that whishes to stream their patches through Randio. We encourage the creation and stream of non-deterministic patches, but determistic ones
  140. are also appreciated. If you would like to send us a patch, please do. Send us an
  141. <a href="mailto:randio@autoproduzioni.net" class="barra" target="_blank">email</a>
  142. following these guidelines:
  143. <ul>
  144. <li>The patch must auto-start. Be sure to activate it with [loadbang] objects.</li>
  145. <li>DSP must auto-start. Be sure to activate it with a [;pd dsp 1] message bound
  146. to a [loadbang].</li>
  147. <li>Audio output must flow through a [dac~] object.</li>
  148. <li>Each patch must be contained in its own directory, even if only one .pd
  149. file is involved.</li>
  150. <li>If a patch needs custom objects or samples these must be stored in their own
  151. sub-directory, inside the directory of the patch. These sub-directories must be
  152. declared inside the patch by using a [declare] object. Always use relative and
  153. never absolute paths. Example: [declare -path ./samples]</li>
  154. <li>Add an info.txt file to your patch. An info.txt file is a text file containing
  155. information about the piece and the artist. It should be written following simple
  156. rules as described inside <a href="txt/info.txt" class="barra" target="_blank">info.txt</a>
  157. sample file. In this file you can also write the name of the license of your patch and
  158. citations about samples or other things used that require a citation. Example: a sample file
  159. released under a Creative Commons Attribution license.</li>
  160. <li>Specify the time that your composition takes inside info.txt file. This time is composed by a fixed duration,
  161. (as to say the minimum amount of time the composition should take), and a variable duration (an additional number of minutes
  162. that can be added to the fixed duration).
  163. If your piece needs a fixed duration only, these values will be something like: Fixed_duration: 4, Variable_duration: 0.
  164. If your piece has a variable duration, add a reasonable amount of minutes to the variable duration camp inside info.txt.
  165. <li>Add a license file. It is a text file containing the license of your choice for your patch. Example:
  166. <a href="txt/license.txt" class="barra" target="_blank">license.txt</a>.</li>
  167. <li>Compress all these files in an .tar.gz or .zip archive. The content of the
  168. archive should have the following structure:
  169. <ol>
  170. <li>piece_name</li>
  171. <li>info.txt</li>
  172. <li>license.txt</li>
  173. <li>piece_name.pd</li>
  174. <li>objects</li>
  175. <li>obj1.pd</li>
  176. <li>samples</li>
  177. <li>sample1.wav</li>
  178. <li>sample2.wav</li>
  179. </ol>
  180. </li>
  181. <li>Send the archive to us by writing an <a href="mailto:randio@autoproduzioni.net" class="barra" target="_blank">email</a> with the subject: "New Randio patch!".</li>
  182. <li>All patches sent in a different way as described, with a not properly designed archive or patch, or sent to a different address, or sent with a different subject will be ignored.</li>
  183. <li>If you send us a patch as described above, you implicitly accept our policy, as described below.</li>
  184. </ul>
  185. </p>
  186. </div>
  187. </article>
  188. <article id="policy">
  189. <div class="text">
  190. <p>
  191. Radio Randio developers are free to stream Radio Randio and its contents in any way, with any means and for any purpose. People who wish to contribute to Radio Randio must understand and accept that. If an artist decide to share his work with us and our listeners, we will cite him as the original
  192. author of his work, but in order to make our collaboration possible it is important that:
  193. <ul>
  194. <li> The code must be released under the terms of some open source license that grant us the right to use and share the code.</li>
  195. <li> The music generated and the data used to generate it (for example samples) must be released using licenses
  196. that grant to us the possibility to stream freely without restrictions.</li>
  197. </ul>
  198. <p>
  199. If you use samples or other data that is released under the terms of a license that require citation of the original author, remember to do that and write all required references inside the info.txt file and the patch. It is forbidden the use of samples, compositions or anything that is protected by any form of copyright that does not grant
  200. the possibility to share the work freely and without payment and/or belonging to any kind of copyright collection society. The verification of the copyright status of each part of a patch is a duty of the author of the patch itself, and must be
  201. done before sending the patch to Randio. Either if the author of a patch is member of any kind of copyright collection society or not, Randio and its developers
  202. can not be held responsible for issues regarding the author of a patch and any copyright collection society. When we receive a patch and its complementary files from an author we trust that the sender has the rights to send us that
  203. patch and its complementary files. The author of the patch, will be cited during the stream of its music by writing his name and the name of the piece
  204. as Icecast metadata. The correct operation of this citation process is not 100% guaranteed but it should work. We like and accept the following licenses:
  205. </p>
  206. <ul>
  207. <li> Creative Commons licenses that also allow commercial use of the work. </li>
  208. <li> BSD licenses. </li>
  209. </ul>
  210. <p>
  211. Neither Randio nor the names of its contributors may be used to endorse or promote products derived from Randio and its
  212. software and its music without specific prior written permission. Once a patch is sent as described in the <i>How to contribute</i> section, the author of the patch implicitly accept this policy,
  213. and grant to Radio Randio developers the right to use that patch for any purpose, even commercial ones. This policy can change in any time and without prior notice. If you don't agree to this policy, do not use this service.
  214. </p>
  215. </p>
  216. </div>
  217. </article>
  218. <article id="patches">
  219. <div class="text">
  220. <p>
  221. We share our code with all contributors. To be a contributor you must send us a patch as described above, and this patch must be accepted to be added to the playlist. After that, we will send you an email containing an username and a password that will grant you access to our repository. Our repository of patches is available here: <a href="http://www.randio.it/patch/" class="barra" target="_blank">http://www.randio.it/patch</a>. Read <a href="http://www.randio.it/patch/POLICY.txt" class="barra" target="_blank">POLICY.txt</a> file before downloading any file from us and, please, in order to prevent server overloads, avoid the download of the entire repository using automatic download systems.
  222. </p>
  223. </div>
  224. </article>
  225. <article id="contacts">
  226. <div class="text">
  227. <p>You can reach us at <a href="mailto:randio@autoproduzioni.net" class="barra" target="_blank">[email]</a></p>
  228. </div>
  229. </article>
  230. <!---<div id="shadow-caster" style=-"box-shadow: 0px -80px 40px white;width: 100%;height: 5em;"></div>--->
  231. <article id="other-radios">
  232. <div class="text">
  233. other interesting radios
  234. </div>
  235. </article>
  236. </div>
  237. <div id="ring-wrapper">
  238. <div id="pd-ring">
  239. <table class="pd_ring" cellpadding="0" cellspacing="0" border="0">
  240. <tr>
  241. <td class="pd_ringnext">
  242. <input class="pd_ringnext" type="image" name="next" src="http://pd.klingt.org/pd_ring/next.gif" /></td>
  243. <td class="pd_ringlist">
  244. <input class="pd_ringlist" type="image" name="list" src="http://pd.klingt.org/pd_ring/list.gif" /></td>
  245. <td class="pd_ringrandom">
  246. <input class="pd_ringrandom" type="image" name="random" src="http://pd.klingt.org/pd_ring/random.gif" /></td>
  247. <td class="pd_ringprevious">
  248. <input class="pd_ringprevious" type="image" name="previous" src="http://pd.klingt.org/pd_ring/previous.gif" /></td>
  249. </tr>
  250. <tr>
  251. <td class="pd_ringinfo" colspan="4">
  252. <a href="http://pd.klingt.org/pd_ring/info.html" target="_blank">
  253. <img class="pd_ringinfo" src="http://pd.klingt.org/pd_ring/pd_ring.gif" alt="pd_ring info"/></a>
  254. </td>
  255. </tr>
  256. </table>
  257. </div>
  258. </aside>
  259. </div>
  260. </main>
  261. <div class="cookies">
  262. <p style="margin:auto">We respect your privacy and this website does not use cookies.</p>
  263. </div>
  264. <script>
  265. function getTitle(){
  266. var result = '';
  267. $.ajax({
  268. url: "./title.php",
  269. async: false,
  270. success: function(data) {
  271. result = data;
  272. }
  273. });
  274. return result;
  275. }
  276. function printTitle(){
  277. var title = getTitle()
  278. var titlezone = document.querySelector('h7');
  279. titlezone.textContent = 'Now playing: ' + title;
  280. }
  281. function printInfo(){
  282. var title = getTitle()
  283. var titlezone = document.querySelector('h6');
  284. titlezone.innerHTML = '<a href=./info/' + title + '.info.txt class="barra" target="_blank">[Track info]</a> <a href="txt/playlist.txt" class="barra" target="_blank">[Playlist]</a><br><br>';
  285. }
  286. printTitle();
  287. printInfo();
  288. setInterval(printTitle, 10*1000);
  289. setInterval(printInfo, 10*1000);
  290. </script>
  291. </body>
  292. </html>