Cross-platform MP3 player in WordPress

 Gepubliceerd door om 19:13  Algemeen
mrt 202011
 

Gerard Poels heeft een nieuwe bel op zijn fiets. Nee, niet de bel die je hiernaast ziet uiteraard, wil je hem zien en horen, dan moet je even naar zijn site gaan.
Maar juist bij dat horen zat hem een mooie uitdaging. De player die Gerard gebruikt(e) is een Flash-player. En dus kon ik op de iPad niet naar zijn nieuwe bel luisteren. Gerard gaf aan dat hij nog geen goede plugin gevonden had als vervanger voor die wat hij nou gebruikt. Kijk, dat klonk als een uitdaging. 🙂

Er blijkt gelukkig al een plugin te zijn voor WordPress waarmee je eenvoudig een MP3 of videobestand in kunt voegen in een post op een manier die voor zowel gewone browsers als voor de iPad werkt. Luister maar:

Dit is de bel van Gerard en die moet je nu dus zowel op je laptop / Macbook als op een iPhone / iPad etc. kunnen beluisteren.
Ik heb de plugin overigens niet handmatig geïnstalleerd, maar vanuit de plugin pagina gezocht naar “Degradable HTML5 audio and video”, dat werkt veel handiger.

[update]
Test met Google player (geen plugin of installatie nodig):

Deel dit bericht:

  13 reacties aan “Cross-platform MP3 player in WordPress”

Reacties (13)
  1. We hebben het er op Twitter al even over gehad maar nog even hier voor de lieve lezertjes van deze nuttige site. Deze (prachtige) plug-in werkt vanaf WordPress 2.6 en daar ben ik nog niet.
    Na een update ga ik deze plugin zeker gebruiken. Dank!

  2. Ik had inderdaad niet gezien dat dat de minimum eis was voor de plugin, maar (zoals ook via Twitter aangegeven), ik vond het hoe dan ook een leuke uitdaging om dat ook voor hier op de site op te lossen. 🙂

  3. Ah Pierre, please?
    Weet jij of er ook zo’n player is die ik in Blogger kan hangen?
    Dan ben je voor vandaag weer de held voor mij!

  4. Hoi Willem,

    Zie de uitleg in dit bericht. Ik heb de code niet zelf in een blogger.com getest, maar kan wel al bevestigen dat hij ook op de iPad werkt (levert dezelfde player op als de WordPress plugin). Ik heb hem hierboven aan het bericht toegevoegd en omdat je geen code hoeft te installeren (alleen een embed toevoegen) lijkt me dat het moet werken.

    @Gerard: dat zou bij jou dan dus ook moeten werken.

  5. HELD!
    Ook al getest op m’n iPhone en het werkt gewoon.
    Een stuk simpeler dan de jPlayer die ik inmiddels zelf gevonden had.
    Wat ik bijzonder vind is dat in de code gewoon een .swf aangeroepen lijkt te worden.
    Google zet dat blijkbaar zelf om naar html5 indien nodig?
    Ik ga gauw het bericht lezen waar je naar verwijst.
    Nogmaals bedankt Pierre!

  6. Dat is een hele mooie Pierre. Hij staat nu in de plaats van de vorige player in de originele blogpost en hij werkt inderdaad ook in een niet-flash browser 🙂
    De toegevoegde code blijkt bij her-editten van de post kapotgemaakt door mijn versie van WordPress, dus dat is niet zo handig. Ik denk niet dat ik hem ga gebruiken voor sites die ik zelf niet bij ga houden. Er is namelijk geen plaatsingsinterface en dat is voor niet technische website redacteuren niet handig.
    Voor de iets nerderigere types onder ons is dize code een uitkomst!

    Wederom dank 🙂 (En @Willem: Veel plezier er mee!

  7. Perfect!
    Voor een goede weergave op de iPhone heb ik de breedte alleen even aangepast naar 280 pixels.
    Kijk maar op de audio pagina van mijn mobiele app.

    • @Willem Hij had overigens een van jouw reacties vreemd genoeg als SPAM aangemerkt. Je had hem al een keer (zonder problemen) opnieuw geplaatst, dus ik heb hem niet meer alsnog doorgezet.

      @bijnanooit Ik neem aan dat dat kapot maken van de code in de WYSIWYG editor gebeurde? Daar is WordPress soms een beetje vervelend mee inderdaad.

  8. @Pierre Precies, dat doet de WYSIWYG editor vaker. WP is wat dat betreft behoorlijk eigenwijs (Jammergenoeg ook met het plaatsen van een google map…)

  9. Mooi! Ik kwam er nog een aantal tegen die de moeite van het bekijken waard zijn:
    http://mediaelementjs.com/
    http://cj-jackson.com/projects/autoembed-and-html-5-player-plugin-demo/

  10. Nog steeds een held Pierre!
    Ik heb er een bericht van gemaakt voor de Blogger bloggers onder ons:
    http://www.trendmatcher.nl/2011/03/cross-platform-mp3-speler.html

  11. Beste Pierre,

    Het is een prachtige player, alleen werkt hij niet bij wordpress.com daar kan je zelf ook geen plugin installeren.

    Mocht u daar ook zo oplossing voor hebben dan zou dat prachtig zijn, en hou ik mij natuurlijk aanbevolen.

    Bij voorbaat vriendelijke dank.

  12. Beste Henk,

    Ik neem aan dat in ieder geval de tweede player, die gebruik maakt van de Google Player wel op WordPress.com werkt? Voor die hoef je namelijk niet te installeren.

Sorry, het reactieformulier is momenteel gesloten.