Wie erstelle ich einen Musikplayer mit Songauswahl in HTML?

...komplette Frage anzeigen

1 Antwort

Hallo!

Für deine Ansprüche gibt es bereits einige Plugins, die man dann nur noch korrekt in die Website einbauen muss.

Unter folgendem Link findest du eine Liste einiger Plugins.

http://www.instantshift.com/2012/06/08/15-free-html5-audio-players-for-your-website-and-blogs/

Ansonsten würde ich einfach mal eine Suchmaschine deiner Wahl mit "html audio player playlist" befragen.

Es gibt da eine myplaylist.js datei, da steht

var myPlaylist = [
 {
        mp3:'mix/1.mp3',
        oga:'mix/1.ogg',
        title:'Sample',
        artist:'Sample',
        rating:5,
        duration:'0:30',
        cover:'mix/1.png'
    },
 {
  mp3:'mix/fade.mp3',
  oga:'mix/fade.ogg',
  title:'Fade',
  artist:'Alan Walker',
  ranking:5;
  duration:'4:24',
  cover:'mix/cover.png'
 }
];

da hab ich ein Lied hinzugefügt, aber wenn ich die Seite dann lade, kommt nur nur ein Hintergrund.

0
@biolaxy

Ich habe den Player noch nie verwendet und ohne deinen Code zu sehen auch nicht wirklich gezielt antworten, aber ich kann dir die Standard-Debugging-Fragen stellen:

  1. Hast du alle nötigen Dateien eingebunden?
  2. Sind alle Pfade korrekt angelegt? (JS sowie die pfade für die Sounddateien in der myplaylist.js)
  3. Hast du den Player im head deiner Seite initialisiert? (Also das "$(document).ready(function(){" eingefügt?
  4. Gibt es sonst irgendwelche Syntaxfehler im Markup, die den Player in irgendeiner Art stören könnten?

Sie dir hierzu am besten als Referenz den Quellcode im head der Seite an, die du oben in dem Kommentar verlinkt hast.
Falls es danach immer noch nicht läuft, kannst du mir ne Freundschaftsanfrage schicken und mir mal den Code zukommen lassen :)

0
@MarcusCJ

Also ich habe die Demo von diesem Player benutzt, und da müsste ja eigentlich alles richtig sein, ich hoffe ich habe das von der englischen Anleitung auch richtig verstanden. Ich habe da leider nicht sehr große Kenntnisse, da ich selbst erst am Anfang von HTML, PHP usw. in der Berufsschule bin :(

0
@MarcusCJ

Ich habe den Fehler gefunden xD in dem zweiten {}-Block, in dem die fade.mp3 eingefügt wird, hast du nach
"ranking:5" einen Strichpunkt gesetzt. Da muss ein Komma hin.

ranking:5;
ranking:5,
1

Ok

0

Was möchtest Du wissen?