Enklare ljudövningar med Webplayer

Yahoo Webplayer är en liten tjänst från Yahoo som till en början verkar vara “ännu en ljudspelare” i mängden. När man börjar titta närmare så visar det sig att den har en hel del intressanta funktioner.

Vad som är än bättre, är att de dessutom lyckats göra det tämligen enkelt att lägga in ljud på webbsidor. Något som hittills varit lite komplicerat att göra på ett snyggt sätt.

Fördelar

• Webplayer gör det enkelt att göra tex digitala språkövningar där eleven även kan höra hur det låter. Detta gör att det med gaska enkla medel (läs ingen flashkunskap eller liknande) går att snabbt göra övningar som blir riktigt bra.
• Det finns en hel del saker man kan ställa in beroende på hur man vill att spelaren uppför sig. Se dokumentation på länk i slutet av artikeln.

Nackdelar

• Enligt google page speed är skriptet perfekt optimerat men tester visade ändå att sidan tar ca 1-1.5s långsammare att ladda med en webbspelare på sidan.
• Eftersom det handlar om att lägga dit ett stycke kod till sidan så kan det hända att system som WordPress, LMS-system mm kräver handpåläggning av en administratör för att det ska fungera.

 

Hur fungerar det då?
Webplayer är ett javascript som ligger på yahoo’s servrar. Du anropar javascriptet genom att först länka till det. Klistra koden nedanför i slutet av sidan ovanför </body>-taggen.

<script type="text/javascript" src="http://webplayer.yahooapis.com/player.js"></script>

Om allt fungerar som det ska så ska nu länkar som länkar till tex en mp3-fil eller ett youtube-klipp automatiskt förses med en spelaknapp. Till exempel:

<a href="http://mediaplayer.yahoo.com/example3.mp3">Yodel (mp3 link)</a>

Blir: Yodel (mp3 link). Denna länken är en vanlig länk till en mp3-fil och skriptet känner av detta automatiskt.

På samma sätt kan du länka till ett youtube-klipp. För att lägga in youtube-länken Big Bucks Bunny skriver du helt enkelt länken till youtube-klippet:

<a href="http://www.youtube.com/watch?v=7RVceS1usQs"Big Bucks Bunny</a>

Så länge det bara handlar om vanliga HTML-sidor så är detta väldigt enkelt. Lite mer avancerat blir det om man använder sig av dynamiska sidor i tex ett LMS, CMS eller bloggsystem.

Rekommendationer vid lärsystem/CMS, bloggar mm (Överkurs)
Om man använder ett lärsystem eller en blogg så kan det bli lite mer avancerat. Så här löste jag det på WordPress :

$posttags = get_the_tags();
if ($posttags) {
 foreach($posttags as $tag) {
 if ($tag->name == "webplayer") {
 ?> <script type="text/javascript" src="http://webplayer.yahooapis.com/player.js"></script> <?
 }
 }
}
?>

Då skriptet gör att det tar någon extra sekund eller så att ladda sidan, så rekommenderar vi inte att man har med det på samtliga sidor. Detta händer om du lägger in det som det är i en template eller annat som laddas varje gång. Istället gör vi en liten abrovink för att komma runt detta.

Idén är att märka upp de sidor som ska använda skriptet med något. I WordPress har man tex möjligheten att märka sidor och inlägg med taggar. Så det fick bli en bra utgångspunkt. Jag lade in koden i en template som heter “footer.php” i WordPress. Denna passade utmärkt då den laddas varje gång en sida laddas. Dessutom hamnar innehållet i “footer.php” dessutom längst ner på sidan vilket passar utmärkt. Fördelen med detta är att om webplayer-skriptet skulle ta ovanligt lång tid att köra så har resten av sidan redan laddats.

På detta sättet laddas bara javascriptet in om inlägget eller sidan i wordpress är taggat med “webplayer”. I skrivandets stund har vi inte riktigt kommit på hur man kan göra detta i Moodle på ett smidigt sätt. Vi återkommer om det.

 

Läs mer om Webplayer här:
http://webplayer.yahoo.com/

Dokumentationen hittar du här:
http://webplayer.yahoo.com/docs/

Jag hittade ett bra exempel där webplayer används i pedagogiskt syfte. Kika närmare här: http://www.ielanguages.com/swedish1.html

 

Kommentarer

Lärresurser

partners

RSS