Frage von TygaOne, 74

Wie erstelle ich einen Musikplayer mit Songauswahl in HTML?

Hallo Zusammen,

ich möchte in auf meiner Webseite die mit HTML geschrieben ist einen Musikplayer einbauen, mit dem es möglich ist, einen Song aus einer Liste auszuwählen und abzuspielen. Also eigentlich ein schön gestaltetes Audio Element mit Songauswahl. Könnt ihr mir da weiterhelfen wie ich sowas erstelle?

Lg TygaOne

Antwort
von MarcusCJ, 55

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-webs...

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

Kommentar von TygaOne ,

Ich habe nun den Player von http://www.codebasehero.com/2011/07/html5-music-player-updated/ benutzt, jedoch kann ich keine Lieder hinzufügen :( kennst du dich ja aus?

Kommentar von TygaOne ,

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.

Kommentar von MarcusCJ ,

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 :)

Kommentar von TygaOne ,

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 :(

Kommentar von MarcusCJ ,

--> PN

Kommentar von 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,
Kommentar von TygaOne ,

Ok

Keine passende Antwort gefunden?

Fragen Sie die Community