{"id":1710,"date":"2013-01-21T13:22:20","date_gmt":"2013-01-21T11:22:20","guid":{"rendered":"http:\/\/jml.kapsi.fi\/jussi\/?p=1710"},"modified":"2025-01-08T09:19:06","modified_gmt":"2025-01-08T07:19:06","slug":"aanta-websivulle","status":"publish","type":"post","link":"https:\/\/jml.kapsi.fi\/jussi\/2013\/01\/21\/aanta-websivulle\/","title":{"rendered":"\u00c4\u00e4nt\u00e4 websivulle"},"content":{"rendered":"\n<p>Miten lis\u00e4t\u00e4\u00e4n \u00e4\u00e4nt\u00e4 verkkosivulle? T\u00e4h\u00e4n l\u00f6ytyy useita mahdollisuuksia, joista esittelen t\u00e4ss\u00e4 muutaman.<br><\/p>\n\n\n\n<!--more-->\n\n\n\n<p>K\u00e4yt\u00e4n esimerkkin\u00e4 musiikkikappaletta, jonka olen tallentanut www-palvelimelle osoitteeseen:<\/p>\n\n\n\n<p><code class=\"language-markup\">http:\/\/jml.kapsi.fi\/pore\/music\/Pore_02_-_I_know_where_I_stand.mp3<\/code><\/p>\n\n\n\n<p>Minulla on siis mp3-tiedosto nimelt\u00e4\u00e4n <code class=\"language-markup\">Pore_02_-_I_know_where_I_stand.mp3<\/code>, joka sijaitsee palvelimella <code class=\"language-markup\">jml.kapsi.fi<\/code> hakemistossa <code class=\"language-markup\">\/pore\/music\/<\/code>. N\u00e4in se saadaan soimaan:<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">1. Suora linkki tiedostoon<\/h2>\n\n\n\n<p>Ensimm\u00e4inen tapa tarjota kyseinen tiedosto on tehd\u00e4 siihen normaali linkki:<\/p>\n\n\n\n<p><a href=\"http:\/\/jml.kapsi.fi\/pore\/music\/Pore_02_-_I_know_where_I_stand.mp3\">I Know Where I Stand (mp3 3.5M)<\/a>.<\/p>\n\n\n\n<p>Se, mit\u00e4 linkki\u00e4 klikkaamalla tapahtuu, riippuu www-selaimesta. Selain saattaa osata soittaa tiedoston tai mahdollisesti se ehdottaa lataamaan tiedoston omalle koneelle, mist\u00e4 sen voi toistaa koneen mediasoittimella. Tiedoston voi yleens\u00e4 tallentaa my\u00f6s klikkaamalla sit\u00e4 hiiren oikeanpuoleisella napilla ja valitsemalla <em>tallenna nimell\u00e4<\/em> tai jotain vastaavaa. Tapa sopiikin parhaiten sellaisiin tilanteisiin, joissa halutaan jakaa tiedosto tallennettavaksi ja k\u00e4ytt\u00e4j\u00e4n omilla audiosoittimilla kuunneltavaksi.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">2. HTML5 &amp; &lt;audio&gt;-elementti<\/h2>\n\n\n\n<p>Seuraava tapa voisi olla hy\u00f6dynt\u00e4\u00e4 <a href=\"http:\/\/www.w3schools.com\/html\/html5_intro.asp\">HTML5<\/a>-kuvauskielen <code class=\"language-markup\">&lt;audio&gt;<\/code>-elementti\u00e4 sivun koodauksessa seuraavasti:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;audio controls&gt;\n&lt;source src=\"http:\/\/jml.kapsi.fi\/pore\/music\/Pore_02_-_I_know_where_I_stand.mp3\" type=\"audio\/mpeg\"&gt;\nValitettavasti selaimesi ei tue t\u00e4t\u00e4 audiomuotoa \n&lt;\/audio&gt;<\/code><\/pre>\n\n\n\n<p>T\u00e4m\u00e4n tuloksena nykyaikainen www-selain esitt\u00e4\u00e4 audiosoittimen ja vanhentunut selain ilmoittaa virheest\u00e4:<\/p>\n\n\n\n<p><audio controls=\"controls\"><source src=\"http:\/\/jml.kapsi.fi\/pore\/music\/Pore_02_-_I_know_where_I_stand.mp3\" type=\"audio\/mpeg\">Valitettavasti selaimesi ei tue t\u00e4t\u00e4 audiomuotoa<\/audio><\/p>\n\n\n\n<p>T\u00e4m\u00e4 on suhteellisen helppo ja kevyt toimitatapa, joka vaatii jonkin verran HTML-osaamista. Miinuspuolena on HTML5-vaatimus, jota vanhemmat www-selaimet eiv\u00e4t v\u00e4ltt\u00e4m\u00e4tt\u00e4 tue (jos et n\u00e4e yll\u00e4 audiosoitinta, p\u00e4ivit\u00e4 www-selaimesi).<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">3. Sivuille asennettu soitin<\/h2>\n\n\n\n<p>Verkosta l\u00f6ytyy useita audiosoittimia, jotka voi asentaa omalle sivustolle. T\u00e4ss\u00e4 esimerkki <a href=\"http:\/\/flash-mp3-player.net\/\">MP3 Player<\/a> -soittimesta, jonka olen asentanut Tarkkaamo-blogiin:<\/p>\n\n\n\n<p><object data=\"http:\/\/jml.kapsi.fi\/jussi\/wp-content\/plugins\/mp3player\/player_mp3_maxi.swf\" type=\"application\/x-shockwave-flash\" width=\"400\" height=\"30\"><param name=\"FlashVars\" value=\"mp3=http:\/\/jml.kapsi.fi\/pore\/music\/Pore_02_-_I_know_where_I_stand.mp3&amp;showstop=1&amp;showvolume=1&amp;bgcolor1=9999aa&amp;bgcolor2=ddddee\"><\/object><\/p>\n\n\n\n<p>Soittimen HTML-koodi n\u00e4ytt\u00e4\u00e4 t\u00e4lt\u00e4:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;object type=\"application\/x-shockwave-flash\" data=\"http:\/\/jml.kapsi.fi\/jussi\/wp-content\/plugins\/mp3player\/player_mp3_maxi.swf\" width=\"400\" height=\"30\"&gt;\n&lt;param name=\"FlashVars\" value=\"mp3=http:\/\/jml.kapsi.fi\/pore\/music\/Pore_02_-_I_know_where_I_stand.mp3&amp;showstop=1&amp;showvolume=1&amp;bgcolor1=9999aa&amp;bgcolor2=ddddee\" \/&gt;\"&lt;\/object&gt;<\/code><\/pre>\n\n\n\n<p>On huomioitava, ett\u00e4 t\u00e4m\u00e4 vaatii riitt\u00e4vi\u00e4 oikeuksia www-palvelimelle, jolla sivusto toimii. Jos k\u00e4yt\u00f6ss\u00e4 on esimerkiksi <a href=\"http:\/\/blogger.com\/\">Blogger<\/a> -blogialusta, ei t\u00e4t\u00e4 vaihtoehtoa voi k\u00e4ytt\u00e4\u00e4, koska palveluun ei ole mahdollista asentaa tarvittavaa Flash-tiedostoa.<\/p>\n\n\n\n<p>My\u00f6s t\u00e4m\u00e4n esimerkin soittimessa miinuksena on Flash-toteutus, eli se ei toimi iPadiss\u00e4 eik\u00e4 iPhonessa. Vaihtoehtona voisi k\u00e4ytt\u00e4\u00e4 jotain HTML5-soitinta, esimerkiksi:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"http:\/\/mediaelementjs.com\/\">MediaElements.js<\/a> tai<\/li>\n\n\n\n<li><a href=\"http:\/\/jplayer.org\/\">JPlayer<\/a><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">4. \u00c4\u00e4nen tallennukseen ja jakamiseen tarkoitettu verkkopalvelu<\/h2>\n\n\n\n<p>Viimeinen, monia etuja tarjoava keino on tallentaa \u00e4\u00e4nitiedostot t\u00e4t\u00e4 tarkoitusta varten kehitettyyn verkkopalveluun ja k\u00e4ytt\u00e4\u00e4 palvelun tarjoamia jakamis- ja upotusmahdollisuuksia. Suosittelen t\u00e4h\u00e4n <a href=\"https:\/\/soundcloud.com\/\">SoundCloud<\/a> -palvelua. Sen avulla tiedoston voi upottaa monipuolisen soittimen avulla osaksi www-sivua, ja se mahdollistaa my\u00f6s muita jakamistapoja:<\/p>\n\n\n\n<p><iframe loading=\"lazy\" src=\"https:\/\/w.soundcloud.com\/player\/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F20013221\" width=\"100%\" height=\"166\" frameborder=\"no\" scrolling=\"no\"><\/iframe><\/p>\n\n\n\n<p>Yll\u00e4 oleva upotus toimii seuraavan koodin avulla:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;iframe width=\"100%\" height=\"166\" scrolling=\"no\" frameborder=\"no\" src=\"https:\/\/w.soundcloud.com\/player\/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F20013221\"&gt;&lt;\/iframe&gt;<\/code><\/pre>\n\n\n\n<p>SoundCloudin soitin toimii my\u00f6s iPadilla, ja palvelussa on mainiot mahdollisuudet kommentoimiseen ja kuuluvuuden lis\u00e4\u00e4miseen, jos se on tavoitteena. Kaupan p\u00e4\u00e4lle saa my\u00f6s tilastointia tiedostojen soittom\u00e4\u00e4rist\u00e4.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Miten lis\u00e4t\u00e4\u00e4n \u00e4\u00e4nt\u00e4 verkkosivulle? T\u00e4h\u00e4n l\u00f6ytyy useita mahdollisuuksia, joista esittelen t\u00e4ss\u00e4 muutaman.<\/p>\n","protected":false},"author":2,"featured_media":3213,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11,559,68,4],"tags":[61,319,134,318,322,321,16,320],"class_list":["post-1710","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-artikkeli","category-design","category-musiikki","category-verkkojulkaiseminen","tag-aani","tag-audio","tag-html","tag-html5","tag-player","tag-soitin","tag-sosiaalinen-media","tag-soundcloud"],"_links":{"self":[{"href":"https:\/\/jml.kapsi.fi\/jussi\/wp-json\/wp\/v2\/posts\/1710","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jml.kapsi.fi\/jussi\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jml.kapsi.fi\/jussi\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jml.kapsi.fi\/jussi\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/jml.kapsi.fi\/jussi\/wp-json\/wp\/v2\/comments?post=1710"}],"version-history":[{"count":72,"href":"https:\/\/jml.kapsi.fi\/jussi\/wp-json\/wp\/v2\/posts\/1710\/revisions"}],"predecessor-version":[{"id":5165,"href":"https:\/\/jml.kapsi.fi\/jussi\/wp-json\/wp\/v2\/posts\/1710\/revisions\/5165"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/jml.kapsi.fi\/jussi\/wp-json\/wp\/v2\/media\/3213"}],"wp:attachment":[{"href":"https:\/\/jml.kapsi.fi\/jussi\/wp-json\/wp\/v2\/media?parent=1710"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jml.kapsi.fi\/jussi\/wp-json\/wp\/v2\/categories?post=1710"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jml.kapsi.fi\/jussi\/wp-json\/wp\/v2\/tags?post=1710"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}