• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

[GELOEST] Audioplayer mit Effekt

Sodele, erstmal - danke für die Scripte! Leider habe ich wenig Ahnung, was die Begrifflichkeiten betrifft. Dennoch habe ich versucht, einen einfachen Volume-Slider einzufügen. Ich konnte leider die Lautstärke des Players nicht ändern, offenbar gab es keine Verbindung zwischen Volume-Slider und Player. Zudem kam, dass der Player aufeinmal auf dem Volume-Slider saß. Den Schieberegler konnte ich nicht mehr sehen, weil der Player drauf saß. Und, als ob das nicht genug war, bewegte sich der Schweif ausserhalb des Player und zog seine Kreise im Nirgendwo. Möglicherweise magst Du erneut mein "Helferlein" sein?
 
Werbung:
Für welchen Slider hast Du dich denn entschieden? Poste mal den Code, den Du bisher hast, dann sieht man sicher schnell, woran es hakt.
 
Werbung:
Guten Abend,
allerdings, da hast Du einiges zerlegt und vieles ist abhanden gekommen.

Warum manche meinen, dass Kommentare unnütz sind und gelöscht gehören hat sich mir noch nie erschlossen. Stell dir vor, wenn sich Du, ich oder ganz jemand anders das in einem halben Jahr ansieht. Der wird froh über die Kommentare sein, weil sie das Verständnis erleichtern.

Die Gestaltung des Play-/Pause-Buttons, Größe etc, wird durch einige Konstanten im Javascript gesteuert. Ich habe diese mal zusammen angeordnet und markiert:
Code: 
            // *** Benutzerdefinierte Konstanten:
            // Durchmesser von Button und Wrapper definieren.
            // Die Breite des kreisenden Elementes ergibt sich aus der Differenz.
            btnDiameter = 80,
            wrapperDiameter = 100,
            // Abstand der Linien für "Pause":
            linePauseDist = 20,
            // Breite der Linien:
            lineWidth = 8,
            // Länge der Linien:
            lineLength = 40,
            // Drehwinkel der Linien für "Play" in Grad:
            linePlayAngle = 40,
            // *** Ende benutzerdefinierte Konstanten
            // *** Alles andere nicht anfassen
Außerhalb sollte nichts geändert werden, außer man versteht, wie das Ganze funktioniert. Wenn man mal von den Farben absieht, die im CSS definiert sind.

Der Ansatz mit der Lautstärkeregelung war schon richtig und funktioniert.
 

Anhänge

  • thread1268-audioplayer-animation-17-volume-control-2.txt
    10,7 KB · Aufrufe: 2
Oh, dankeschön!! Jetzt funktioniert es wieder! Wie kann denn der Volume-Slider direkt rechts neben dem Player gesetzt werden, in gleicher Höhe? Und ist es möglich, einen kreisrunden Rahmen um den Schweif in der gleichen Farbe, wie der Player, zu erstellen? Ich dachte, dass der Bereich zwischen diesem Rahmen und dem Player in der gleichen Farbe, wie der Player, ausgefüllt wird, allerdings halbtransparent. Dadurch bewegt sich der Schweif nicht im "leeren Raum". Hier ein Beispiel, dass einen grauen Rahmen um den Player zeigt. Allerdings soll der Rahmen so breit sein, dass sich der Schweif zwischen Rahmen und Player bewegen kann:Anhang anzeigen 6128
 
*hüstel* Öhm, mir ist da noch ein "kleiner" Fehler unterlaufen: Der Hintergrund des Volume-Slider soll links vom Schieberegler die Farbe #2ce1e7 haben, rechts vom Schieberegler sieht man den Hintergrund in der Farbe #696969. D.h. Wenn man lauter, also den Schieberegler noch rechts schiebt, wird die Farbe #2ce1e7 ebenfalls mit "geschoben", bis ganz nach rechts zu 100%. Da habe ich etwas falsch zugeordnet, sorry dafür.
 
Werbung:
Du schreibst, manche meinen, dass "unnütze" Kommentare gelöscht gehören. Das habe ich so noch nicht gelesen. Vor allem, weil Kommentare hilfreich sind, egal wie formuliert, bzw. niedrig der Kennstnisstand des jeweiligen Users ist. Dafür gibt es dieses Forum!
 
Wie kann denn der Volume-Slider direkt rechts neben dem Player gesetzt werden, in gleicher Höhe? Und ist es möglich, einen kreisrunden Rahmen um den Schweif in der gleichen Farbe, wie der Player, zu erstellen? Ich dachte, dass der Bereich zwischen diesem Rahmen und dem Player in der gleichen Farbe, wie der Player, ausgefüllt wird, allerdings halbtransparent.
Zum Vergrößern anklicken....
Diese drei Anforderungen lassen sich recht leicht umsetzen:

Den Rahmen und den Hintergrund kannst Du mit diesem CSS erzeugen:
Code: 
.play-pause-wrapper {
    display: grid;
    width: var(--wrapper-diameter);
    height: var(--wrapper-diameter);
    border-radius: 50%;
    --blur: 3px;
    border: 5px solid blue;
    background-color: rgba(16, 32, 256, 0.2);
}
Die Farben kannst Du dann noch genauer einstellen.

Und beide Elemente lassen sich am einfachsten mit Flexlayout nebeneinander anordnen und zentrieren:
Code: 
body {
    display: flex;
    align-items: center;
}

Was die Kommentare betrifft, muss es sich um ein Missverständnis auf meiner Seite handeln. Tut mir Leid.
 
Werbung:
Ohja! Gottogott, usw. So kommt es rtichtig gut! Dankeschön!!

Ich habe zudem noch an der Größe des äußeren Rahmens gespielt und die Farbe angepasst, bzw. an der Transparenz des Hintergrunds gearbeitet. Mir gefällts.
Jetzt ist mir aufgefallen, dass der äußere Rahmen sich zu einem "Ei" formt, wenn man das Fenster kleiner zieht. Ich habe zuvor die Größe des Rahmens mit "width: 50px; height: 50px;" angegeben. Wenn das Fenster zusammen geschoben wird, dann verformt sich der äußere Rahmen. Kann man die Verformung verhindern? Denn der Player tut dies ja auch nicht. Die Größe soll, bzw. darf sich nicht verändern.

Zum Volume-Slider merke ich an, dass er endlich in einer Reihe, gleicher Höhe wie der Player sitzt - sehr schön!

Den Schieberegler bitte nicht ändern, da hatte ich mich wohl missverständlich ausgedrückt. Lediglich der Hintergrund des Volume-Sliders, also das Band, auf dem der Schieberegler sitzt. Links des Schiebereglers, auf dem Band, soll sich der Hintergrund anpassen. Wenn der Schieberegler standardmäßig in der Mitte des Bandes sitzt, dann soll bereits links von ihm das Band in der Farbe #2ce1e7 erscheinen. Diese Farbe ist sozusagen die Lautsärke, die der Schieberegler ausgibt, verdeutlichen. Wenn ich lauter machen möchte, schiebe ich den Regler nach rechts. Es wird lauter und das Band wird weiter gefüllt mit der Farbe #2ce1e7.
Wenn ich den Regler ganz nach rechts schiebe, erhalte ich 100% der Lautstärke und das Band ist voll ausgefüllt. Andersherum verhält es sich natürlich, wenn ich leiser, bzw. den Regler wieder nach links schiebe.

Mir ist aufgefallen, dass die Lautstärke 100% ausgibt, obwohl der Schieberegler in der 50% Position sitzt. Erst wenn ich den Schieberegler bewege, passt die Lautstärke der tatsächlichen Position des Schiebereglers.

Probiere es bitte hier aus:
https://codepen.io/CGNDaniel/pen/vYMZxQM?editors=1000

Gerade versuche ich einen Rahmen um das Band zu legen.
 
Versuche dieses Skript für die Farben:
Code: 
    <script>
        // Lautstärkeregler
        const
            volumeSlider = document.getElementById('volume-slider'),
            audio = document.querySelector('audio');
        volumeSlider.addEventListener('input', function () {
            audio.volume = volumeSlider.value / 100;
            const gradient = `linear-gradient(90deg, #2ce1e7 0%, #2ce1e7 ${volumeSlider.value}%, #696969 ${volumeSlider.value}%, #696969 100%)`
            volumeSlider.style.background = gradient;
            console.log(gradient);
        });
    </script>
 
PS: Damit die Farben und die Lautstärke gleich beim Seitenaufruf eingestellt wird, lagern wir den Code in eine Funktion aus und rufen diese direkt auf:
Code: 
    <script>
        // Lautstärkeregler
        function setVolume() {
            audio.volume = volumeSlider.value / 100;
            const gradient = `linear-gradient(90deg, #2ce1e7 0%, #2ce1e7 ${volumeSlider.value}%, #696969 ${volumeSlider.value}%, #696969 100%)`
            volumeSlider.style.background = gradient;
            console.log(gradient);
        }
        const
            volumeSlider = document.getElementById('volume-slider'),
            audio = document.querySelector('audio');
        volumeSlider.addEventListener('input', setVolume);
        setVolume();
    </script>
 
Werbung:
Wow! Perfekt! Dankeschön!! Bin gespannt, ob es einfach wird, den Player richtig einzusetzen. Du hast mein Ostern gerettet. Super Hilfe! Dank Deiner Hilfe, nimmt das Projekt gestalt an! Ich wünsche Dir tolle Osterfeiertage!
 
Tja, was soll ich sagen... ich habe versucht diesen Player zweimal einzusetzen, weil es ja zwei Kanäle gibt. Jeder Player bekommt somit eine eigene Audio-URL. Ein Player wurde korrekt eingefügt, mit allen Eigenschaften. Der zweite Player hingegen nicht! Es wurde nur der der äussere Rahmen des Players angezeigt, der Volume-Slider zeigt sich nur in der Hintergrundfarbe, ohne die neuen Einstellungen.

Eingefügt wurden beide Player mit dem identischen Code, ausgenommen die Audio-URL, die sich selbstverständlich unterscheidet. Es funktioniert aber nur ein Player. Seufz. Passt der Code nur für einen Player?
 
Werbung:
Der Code, so wie ich ihn programmiert habe, kann nur mit einem Player funktionieren. Es sollte aber kein Problem sein, ihn auf mehrere zu erweitern, ich werde, so bald möglich, da dran gehen.
 
Hier nun eine Version für beliebig viele Player im Anhang.
 

Anhänge

  • thread1268-audioplayer-animation-22-multi-tpl.txt
    13,4 KB · Aufrufe: 3
Werbung:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben