Sæt en afspiller på dit websted

01Hent et afspiller-id

En afspiller er det, du indlejrer. Den peger på en hel podcast eller på bestemte afsnit, og den har et offentligt id, du indsætter i din HTML.

1. Åbn Konto og derefter Lydafspillere.
2. Opret en afspiller, giv den et navn til dit eget brug, og tilføj det, den skal spille: en hel podcast, ét afsnit eller flere afsnit i den rækkefølge, du vælger.
3. Kopiér afspiller-id'et.

Id'et er ment til at være offentligt.Det står i din sides kildekode, hvor alle kan læse det, og det er fint. Det giver én ting: adgang til at afspille de afsnit, du lagde i den afspiller. Det er ikke en API-nøgle, det når intet andet på din konto, og deaktiverer du afspilleren, tilbagekaldes det alle steder på én gang.

Tilføjer du et afsnit senere, dukker det straks op i alle indlejringer af den afspiller. Intet skal indsættes igen.

02Indsæt to linjer

Sæt scriptet et vilkårligt sted på siden, og div'en dér, hvor afspilleren skal stå.

<script src="https://www.obbo.me/player/obboplayer.js" async></script>

<div data-obbo-player="YOUR_PLAYER_ID"></div>

Det er en komplet integration. Scriptet finder hvert element med attributten data-obbo-player og udfylder det, uanset om siden har én afspiller eller ti. Det gør ingen skade at indlæse scriptet to gange.

Intet hentes, før nogen trykker afspil.Afspilleren henter sin afsnitsliste ved indlæsning, men der bliver ikke bedt om lyd, før en besøgende rent faktisk starter et afsnit. At sætte en afspiller på en side koster dine besøgende ingenting og registrerer aldrig en afspilning, der ikke fandt sted.

03Vælg et layout

Der er syv indbyggede. Vælg ét med data-obbo-ui; udelader du det, får du det, du valgte, da du oprettede afspilleren, så du kan skifte mening uden at redigere nogen sider.

<div data-obbo-player="YOUR_PLAYER_ID"
     data-obbo-ui="list"
     data-obbo-theme="dark"></div>

Alle attributter

Flere afspillere på én side er fint.De deler én enkelt forespørgsel efter din afsnitsliste, og starter man én, sættes de andre på pause, så en besøgende aldrig ender med to stemmer på én gang.

04Få den til at ligne dit websted

Afspilleren vises i din egen sides DOM, ikke i en lukket ramme. Dit stylesheet når den, og dine skrifttyper arves.

Den hurtige måde: ni variabler

.my-player {
  --obbo-player-accent: #e5484d;
  --obbo-player-radius: 4px;
  --obbo-player-font: 'Söhne', system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
  .my-player {
    --obbo-player-bg: #181d24;
    --obbo-player-fg: #f2f5f8;
  }
}

Den grundige måde: klassenavne

Hvert element har en fast obbo--klasse, og hver regel, vi sender med, er en enkelt klasseselektor, så din egen regel vinder uden !important. Roden har også data-obbo-state, så du kan style indlæsnings- og fejltilstanden uden at kende vores indre.

.obbo-p[data-obbo-state="loading"] { opacity: 0.6; }
.obbo-p[data-obbo-state="error"]   { display: none; }

Er din CSS aggressiv, så luk den ude.Et kraftigt framework-reset kan nå ind i afspilleren. Tilføj data-obbo-isolate, så vises den i en shadow root i stedet: immun over for dit stylesheet, men de ni variabler slipper stadig igennem, så du beholder farvekontrollen og mister kun dem på klasseniveau.

05Byg din egen afspiller

Spring layoutene helt over. createPlayer giver dig afsnitsdata, afspilning og position; du skriver markuppet. Lytning bliver stadig talt med, og udløbne lydlinks henter sig stadig, uden at nogen af delene er dit problem. Knapperne herunder kører koden, der står nedenunder.

<button id="play" disabled>Play</button>
<span id="title"></span>
<div id="track"><div id="fill"></div></div>

<script>
  var player = Obbo.createPlayer({ widgetId: 'YOUR_PLAYER_ID' });

  player.subscribe(function (state) {
    play.disabled     = state.status !== 'ready';
    play.textContent  = state.playing ? 'Pause' : 'Play';
    title.textContent = state.episode ? state.episode.title : '';
    fill.style.width  = (state.position / state.duration * 100) + '%';
  });

  play.onclick = function () { player.toggle(); };
</script>

Hold knappen deaktiveret, indtil status er ready.På iOS er tilladelsen til at afspille lyd bundet til det tryk, der bad om den. Et tryk, afspilleren endnu ikke kan handle på, er spildt, og din besøgende skal trykke igen.

06Udskriften, der følger med

Udskriftslayoutet lægger hele afsnittet på din side som tekst og holder det i takt med lyden. Hvert Obbo-afsnit bliver skrevet ud med tidsmarkering pr. sætning som en del af produktionen, så du skal ikke forberede noget.

• Den linje, der bliver sagt, fremhæves og ruller sig selv frem. Ruller du selv, holder den op med at følge med, og en knap fører dig tilbage — den slås ikke med dig om rullebjælken.
• Klikker man på en linje, spilles der derfra, og det gør afsnittet citerbart: en læser kan finde den sætning, de vil have, og høre den sagt.
• Teksten er rigtig tekst på din side, så søgemaskiner indekserer den, og skærmlæsere læser den op. Et afsnit, der ellers ville være en lukket lydkasse, bliver til indhold om dit emne.

<div data-obbo-player="YOUR_PLAYER_ID"
     data-obbo-ui="transcript"></div>

Ikke slået til endnu.Der laves udskrifter til hvert afsnit, men de udgives endnu ikke på indlejrings-API'et, så lige nu viser layoutet afspilleren med en note i stedet for teksten. Den udfylder sig selv, når vi slår feltet til — der skal ikke ændres noget på din side.

07API-reference

Obbo.createPlayer(options)

Afspilleren

Tilstanden

Også på Obbo

08React, Vue og resten

Stol ikke på den automatiske scanning. Et framework, der gentegner beholderen, sletter afspillerens markup og efterlader dens event-lyttere. Montér den selv, og fjern den ved unmount, i et element du aldrig selv tegner i.

function Player({ widgetId }) {
  const host = useRef(null);

  useEffect(() => {
    const player = Obbo.createPlayer({ widgetId });
    const ui = Obbo.ui.list(host.current, player);
    return () => { ui.destroy(); player.destroy(); };
  }, [widgetId]);

  return <div ref={host} />;
}

Indlæs scriptet én gang, i dokumentets head eller via en lille loader, før effekten kører. Det samme gælder Vues onMounted og onUnmounted og Sveltes onMount.

09Content-Security-Policy

Sender dit websted en Content-Security-Policy-header, skal den have tre direktiver.

media-src er den, folk glemmer.Lyd leveres fra lagring på en anden vært end API'et. Udelader du den, ser afspilleren helt rask ud, lige indtil nogen trykker afspil.

10Hvad der tælles

Lytning på dit websted dukker op i din Obbo-statistik: hvor mange gange afspilleren blev indlæst, hvor mange afspilninger der startede, og hvor meget der faktisk blev hørt.

• Dine besøgende bliver aldrig identificeret. Ingen konto, intet login, og afspilleren sætter ingen cookie. Rapporter tilskrives dig som ejer, ikke den, der lytter.
• Et sidevisning er ikke en afspilning. Intet tæller som afspilning, før lyden rent faktisk starter.
• Lyttetid måles, den antages ikke. At spole frem tæller ikke som at have hørt det, du sprang over.

11Når det ikke virker

Stadig i tvivl?Send os sidens adresse, dit afspiller-id og værdien af Obbo.version på hello@obbo.me