Integrer SoundCloud musik på din hjemmeside

Integrer SoundCloud musik på din hjemmeside: En komplet guide

SoundCloud er en populær platform for musikere og lydentusiaster til at dele deres kreationer. Men vidste du, at du også kan integrere din yndlingsmusik eller playlister direkte på din egen hjemmeside eller blog? Dette giver en fantastisk mulighed for at berige dit indhold og tilbyde en unik lytteoplevelse til dine besøgende. I denne artikel vil vi dykke ned i, hvordan du kan opnå dette, både ved hjælp af de simple indlejringsafspillere og ved at udnytte den avancerede SoundCloud Widget API for fuld kontrol. Vi vil også se på, hvordan du kan bygge din egen SoundCloud-afspiller klon.

Brug af Indlejringsafspillere

Den mest ligetil måde at dele SoundCloud-indhold på din hjemmeside er ved at bruge de indlejringsafspillere, som SoundCloud stiller til rådighed. Disse afspillere er designet til at være nemme at bruge og kræver blot, at din hjemmeside understøtter HTML-kode.

Sådan finder du indlejringskoden:

1. Gå til det SoundCloud-nummer eller den playliste, du ønsker at dele.
2. Klik på knappen "Share" (Del).
3. Du vil se en sektion med "Embed" (Indlejr).
4. Kopier den HTML-kode, der vises der. Denne kode er typisk en <iframe>-tag.

Du kan derefter indsætte denne kode direkte i HTML-koden på din hjemmeside eller blog, hvor du ønsker, at afspilleren skal vises. Dette er en hurtig og effektiv metode til at tilføje lyd til dit indhold uden behov for avanceret programmering.

Avanceret kontrol med SoundCloud Widget API

Hvis du ønsker mere kontrol over din indlejrede SoundCloud-afspiller, kan du bruge SoundCloud Widget API. Denne API giver dig mulighed for at styre afspilleren via JavaScript, hvilket åbner op for en række avancerede funktioner.

Tilgængelige parametre for indlejringskoden:

Du kan tilpasse din indlejrede afspiller ved at tilføje parametre direkte til src-attributten i din <iframe>-kode. Her er nogle af de mest nyttige parametre:

Et eksempel på en tilpasset indlejringskode kunne se således ud:

<iframe width="100%" height="166" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/293&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_artwork=true"></iframe>

Tilgængelige metoder i JavaScript:

For at interagere med afspilleren via JavaScript skal du først tilføje et script til din HTML-side, der eksponerer SC.Widget()-funktionen. Denne funktion giver dig adgang til et JavaScript-objekt, der styrer din indlejrede afspiller.

Først skal du inkludere scriptet:

<script src="https://w.soundcloud.com/player/api.js"></script>

Derefter kan du få fat i widget-objektet:

var iframeElement = document.querySelector('iframe'); var widget = SC.Widget(iframeElement); 

Når du har widget-objektet, har du adgang til en række metoder:

• bind(eventName, listener): Tilføjer en lytterfunktion til en bestemt begivenhed.
• unbind(eventName): Fjerner alle lytterfunktioner for en bestemt begivenhed.
• load(url, options): Genindlæser iframe-elementet med en ny widget.
• play(): Starter afspilningen.
• pause(): Pauser afspilningen.
• toggle(): Skifter mellem afspilning og pause.
• seekTo(milliseconds): Springer til en bestemt position i lyden.
• setVolume(volume): Indstiller lydstyrken (0-100).
• next(): Går til næste nummer (kun for playlister).
• prev(): Går til forrige nummer (kun for playlister).
• skip(soundIndex): Springer til et specifikt nummer i en playliste (startende fra 0).

Getter-metoder:

Disse metoder returnerer information om afspilleren og kræver en callback-funktion, da de returnerer værdier asynkront:

• getVolume(callback): Returnerer den aktuelle lydstyrke.
• getDuration(callback): Returnerer den samlede varighed af nummeret i millisekunder.
• getPosition(callback): Returnerer den aktuelle afspilningsposition i millisekunder.
• getSounds(callback): Returnerer en liste over lydobjekter i en playliste.
• getCurrentSound(callback): Returnerer det aktuelle lydobjekt.
• getCurrentSoundIndex(callback): Returnerer indekset for det aktuelle nummer i en playliste.
• isPaused(callback): Returnerer, om afspilleren er pauset (true/false).

Vigtige begivenhedstyper (Event Types):

Du kan reagere på forskellige begivenheder, der udløses af widgeten:

• Audio Events:
• SC.Widget.Events.LOAD_PROGRESS: Udløses periodisk under indlæsning af lyden.
• SC.Widget.Events.PLAY_PROGRESS: Udløses periodisk under afspilning.
• SC.Widget.Events.PLAY: Udløses, når lyden starter afspilning.
• SC.Widget.Events.PAUSE: Udløses, når lyden pauses.
• SC.Widget.Events.FINISH: Udløses, når lyden er færdig.
• SC.Widget.Events.SEEK: Udløses, når brugeren skifter position.
• UI Events:
• SC.Widget.Events.READY: Udløses, når widgeten er klar til brug.
• SC.Widget.Events.CLICK_DOWNLOAD: Udløses, når brugeren klikker på download-knappen.
• SC.Widget.Events.CLICK_BUY: Udløses, når brugeren klikker på købsknappen.
• SC.Widget.Events.OPEN_SHARE_PANEL: Udløses, når delingspanelet åbnes.
• SC.Widget.Events.ERROR: Udløses, når der opstår en fejl.

Byg din egen SoundCloud-afspiller klon med Wavesurfer.js

Hvis du vil tage det et skridt videre og skabe en unik lydafspiller med en visuel bølgeform, kan du følge dette tutorial, der bruger ren HTML, CSS og JavaScript, samt biblioteket Wavesurfer.js. Dette bibliotek er essentielt for at rendere bølgeformen og håndtere afspilningskontroller.

Setup:

Du kan finde al koden på GitHub. Projektet består af tre hovedfiler: index.html, style.css og script.js, samt en assets-mappe til ikoner og lydfiler.

Struktur:

• index.html: Den grundlæggende HTML-struktur.
• style.css: Indeholder alle styling-reglerne for afspilleren.
• script.js: Indeholder al JavaScript-funktionaliteten.
• assets/:
  • icons/: Indeholder SVG-ikoner til play, pause, mute, unmute.
  • audio/: Indeholder lydfilen (f.eks. sample.mp3).

HTML-struktur:

HTML-filen indeholder grundlæggende meta-tags, et link til CSS-filen, og inkludering af Wavesurfer.js samt din egen script.js. Kernen er en <main>-tag med en .container-klasse og en indre <div> med klassen .audio-player.

Inden i .audio-player finder vi:

• En play/pause-knap med et ikon.
• En .player-body, der indeholder:
  • En titel for nummeret.
  • En #waveform div, hvor bølgeformen vil blive vist.
  • En .controls div med:
    • Volume-kontrol (ikon og slider).
    • Tidskode (nuværende tid og total varighed).

CSS-styling:

CSS-filen definerer udseendet af afspilleren, herunder farver, layout, knapper og bølgeformens stil. Der bruges CSS custom properties for nemmere tilpasning. Specifikke stilarter er sat for at skabe et moderne og responsivt design.

Eksempler på CSS:

/* Generelle stilarter */ :root { --primary-color: rgb(24, 24, 24); --primary-background-color: rgb(221, 221, 221); --secondary-color: rgb(75, 75, 75); --secondary-background-color: rgb(255, 255, 255); --highlight-color: rgb(255, 85, 1); --border-radius: 1rem; } /* Lydafspiller */ .audio-player { width: 100%; max-width: 100rem; display: flex; margin: 2rem 1rem; background-color: var(--secondary-background-color); border-radius: var(--border-radius); box-shadow: 0.2rem 0.2rem 1rem 0.2rem var(--box-shadow-color); } /* Afspilningsknap */ .play-button { min-width: 13rem; min-height: 13rem; border: none; background-color: transparent; outline: none; cursor: pointer; } /* Bølgeform */ .waveform { width: 100%; min-height: 8rem; padding: 0.5rem 0; } /* Kontroller */ .controls { display: flex; justify-content: space-between; } /* Lydstyrke slider */ .volume-slider { margin: 0 1rem; cursor: pointer; width: 100%; outline: none; -webkit-appearance: none; background: transparent; } /* Tilpasset lydstyrke slider (bonus) */ .volume-slider::-webkit-slider-thumb { -webkit-appearance: none; height: 1.5rem; width: 1.5rem; border-radius: 50%; background: var(--highlight-color); margin-top: -0.6rem; } .volume-slider::-moz-range-thumb { height: 1.5rem; width: 1.5rem; border-radius: 50%; background: var(--highlight-color); } 

JavaScript-funktionalitet:

JavaScript-koden initialiserer Wavesurfer.js, håndterer afspilning/pause, lydstyrke, mute/unmute, og opdaterer tidskoden. Den bruger også localStorage til at gemme lydstyrken, så den huskes mellem besøg.

Nøglefunktioner inkluderer:

• initializeWavesurfer(): Opretter en ny Wavesurfer-instans.
• togglePlay(): Skifter mellem play og pause og opdaterer knapikonet.
• handleVolumeChange(): Justerer lydstyrken baseret på sliderens værdi.
• setVolumeFromLocalStorage(): Indlæser gemt lydstyrke.
• formatTimecode(): Formaterer sekunder til HH:MM:SS.
• toggleMute(): Slår lydstyrken til/fra og opdaterer ikon samt sliderens status.

Event listeners er opsat for brugerinteraktioner (klik på knapper, ændring af slider) og for Wavesurfer-begivenheder (klar, afspilningsfremdrift, færdig).

Den komplette JavaScript-fil indeholder initialisering af Wavesurfer, indlæsning af lydfilen og håndtering af alle brugerinteraktioner og lydstatusser.

Konklusion

Uanset om du har brug for en simpel måde at dele musik på eller ønsker at bygge en fuldt tilpasset lydafspiller, giver SoundCloud dig værktøjerne. Ved at bruge de indlejrede afspillere eller dykke ned i Widget API og biblioteker som Wavesurfer.js, kan du effektivt integrere lydoplevelser på din hjemmeside og give dine besøgende en rigere brugeroplevelse. Eksperimenter med de forskellige parametre og metoder for at finde den løsning, der passer bedst til dine behov.

Ofte Stillede Spørgsmål (FAQ):

Kan jeg indlejre playlister?

Ja, du kan indlejre både individuelle numre og playlister fra SoundCloud ved at bruge den samme indlejringsproces.

Hvordan ændrer jeg udseendet af standardafspilleren?

Du kan tilpasse farven på kontrolknapperne ved hjælp af color-parameteren i indlejringskoden.

Kan jeg styre afspilningen med egne knapper?

Ja, ved at bruge SoundCloud Widget API og JavaScript kan du binde afspilnings-, pause-, og andre funktioner til dine egne brugerdefinerede knapper.

Hvad er Wavesurfer.js?

Wavesurfer.js er et JavaScript-bibliotek, der gør det muligt at visualisere lydbølger og giver avancerede kontrolmuligheder for lydafspilning, ideelt til at bygge brugerdefinerede afspillere.

Hvis du vil læse andre artikler, der ligner Integrer SoundCloud musik på din hjemmeside, kan du besøge kategorien Teknologi.