Äänen upottaminen bloggeriin

tl;dr Tässä on ohje siihen, miten Bloggeriin voi ympätä äänitiedoston.

Tammi- ja  helmikuussa toteutan Turun yliopiston filosofian yksikössä filosofisen viestinnän kehittämishankkeen. Hankkeessa tuotetaan äänitesarja, joka julkaistaan yliopiston blogipalvelussa.

Lisätietoja hankkeesta: https://blogit.utu.fi/faidros/

Yliopiston blogipalvelu käyttää WordPressiä, jossa äänitiedostojen lisääminen on melkoisen yksinkertaista. Tämä blogi toimii Bloggerissa, joka on Googlen palvelu, eikä blogipostiin voi lisätä äänitiedostoa suoraan, vain videoita tai kuvia.

Bloggeriin äänitiedosto lisätään upottamalla Drivessä oleva tiedosto, kuten tässä alla oleva kissan naukuminen.Toki myös muualla olevia tiedostoja voi käyttää, mutta tämä ohje perustuu olettamaan, että pelataan yhden palveluja tarjoavan yrityksen tuotteilla.

Esitän tässä kolme erilaista ohjetta, joista itse käyttäisin ehkä viimeistä. Lopputulos on siistein, eikä tarvitse käyttää muuta kuin Drivea. Ongelmana siinä on, että melkoista silmän tarkkuutta siinä tarvitaan.

Tapa 1, upotuskoodi

Proseduuri on seuraavanlainen ja perustuu Googlen tuotefoorumin ohjeeseen.

1. Lataa äänitiedosto Driveen johonkin kansioon, johon haluat tallentaa julkisesti saatavilla olevat tiedostosi. Oletettavasti siellä on jo valmiina kansio nimeltä Public, joka on tähän tarkoitukseen tehty.
   Jos jaettua kansiota ei ole, voit jakaa haluamasi kansion klikkaamalla kansion nimeä hiiren kakkospainikkeella (tavallisesti oikea näppäin) ja valitsemalla "jaa". Jakamisen lisäasetuksista voit valita "Julkinen verkossa".
2. Tuplaklikkaa äänitiedostoa, jolloin avautuu äänisoitin.
3. Klikkaa iIkkunan yläreunassa oikealla olevaa lisätoimintopainiketta (kolme päällekkäistä pistettä). 
4. Valitse "Avaa uuteen ikkunaan".
5. Uudessa ikkunassa klikkaa jälleen lisätoimintopainiketta.
6. Valitse "Upota kohde".
7. Kopioi annettu html-koodi.
8. Mene omaan Bloggeriisi ja tekstin muokkauksessa valitse HTML-näkymä.
9. Liitä koodi haluamaasi paikkaan.

Yllä olevan kissan naukumisen koodi on seuraavanlainen:

<iframe src="https://drive.google.com/file/d/1CpyZimSuXMVAvgouyx4HqWcFq_Y5O_wn/preview" width="640" height="480"></iframe>

Eli upotuskoodi on iframe-elementti, jossa esitetään äänitiedoston katselusivu. Huomaa yllä leveys- ja korkeusattribuutit, jotka kannattaa muuttaa järkevämmiksi. Noilla oletusarvoilla kehyksestä tulee naurettavan suuri. Tässä kissaäänessä korkeus on 48 ja leveys 400.

Tapa 2, <audio> (poistettu)

Poistin tästä välistä toisen tavan, joka edellyttää erillisen tiedostovaraston tekemistä Googlen Sites-palvelun vanhalla versiolla ohjeen mukaan. Sites-palvelun uudella versiolla tuo ohje ei toimi.

Sivustoja ei mielestäni ole tarkoitettu tällaiseen, joten poistin myös luomani varaston.

Tapa 3, suora latauslinkki Drivesta ja audioelementti

Tämä keino edellyttää hieman silmän tarkkuutta, mutta on kaikkineen ehkä silti paras vaihtoehto näistä. Ensimmäisen keinon upotuskoodissa on tiedoston lähteenä src="https://drive.google.com/file/d/1CpyZimSuXMVAvgouyx4HqWcFq_Y5O_wn/preview", josta otetaan lihavoituna oleva tiedoston tunnistemerkkijono ja liitetään se latauslinkin kohteeksi. Se on siis /d/ ja /preview välissä oleva häsmäke.

Eli

1. Etene kuten ohjeessa yksi
2. Kopioi häsmäke
3. Liitä se https://drive.google.com/uc?export=download&id=FILE_ID linkkiin FILE_ID tilalle.
4. Kopioi ja liitä syntynyt linkki audiolementin lähteen kertovan elementin lähdeattribuutiin arvoksi.

Lopullinen kissanaukumisen koodi on siis seuraavanlainen.

<audio controls>
<source src="https://drive.google.com/uc?export=download&amp;id=1CpyZimSuXMVAvgouyx4HqWcFq_Y5O_wn" type="audio/mpeg"></source>
</audio>



Se mikä tätä tapaa käyttäen on kiusallista on, että Bloggerin editori ei tunnista audioelementin koodia, eikä se siis näy lainkaan editorin "Luo"-tilassa. Ks. kuva alla. Etuna on, että soitin on paljon siistimmän näköinen.

Audioelementti on otsikon ja tekstikappaleen välissä, mutta ei näy tekstiä luodessa.

Toivottavasti näistä ohjeista on jotain apua jollekulle. Jos vaikka alat tehdä omaa radio-ohjelmasarjaasi.
Nyt ei muuta kuin kohti ensimmäistä epäonnistumista.