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

[GELOEST] Audioplayer mit Effekt

D

DanielCGN

Neues Mitglied
Hallo zusammen,

ich habe einen Player erstellt, nach Vorgaben aus YouTube-Videos: https://codepen.io/CGNDaniel/pen/abxZXBW
Er soll aber zusätzlich einen Effekt haben, der eine Art Schweif um den Player laufen lässt, so wie in diesem Beispiel: https://codepen.io/CGNDaniel/pen/KKYVZEz

Das Problem: In dem Beispiel-Player wurde ein Image verwendet, das ich nicht habe. Daher soll ein solcher Effekt auch per SCSS möglich sein, wie ich erfahren habe. Dieser Effekt soll aber nur dann zu sehen sein, wenn man den Player startet. Stoppt der Player, verschwindet auch der Effekt.

Für den Schweif habe ich folgende Farben vorgesehen: "linear-gradient(to right, #2ce1e7 50%, #FF5858 50%, #fe019a)". Die Player-Farbe:
#2ce1e7. Klickt man auf Start, ändern sich die Linien innerhalb des Buttons "#app" zu Pause. Dabei ist mir aufgefallen, dass die Linien nicht die gleiche Länge, bzw. Größe haben und sie sich auch nicht mittig befinden. Die Farbe der Linien: #2b2b2b.

Rechts des Players würde ich gerne eine Volume-Control haben, ebenfalls in der Farbe #2ce1e7.

Da ich es nicht hinbekommen habe, flehe ich um Hilfe. Ich bin schon recht verzweifelt.

Danke, für Eure Unterstützung!

Gruß,
Daniel
 
Werbung:
Könnte eine witzige Aufgabe sein, bloß, ich kann bei dem Player in dem zweiten Beispiel https://codepen.io/CGNDaniel/pen/KKYVZEz
keinen animierten Schweif erkennen, bloß einen radialen Farbverlauf? Ist das dein eigener Versuch? Wo kann man sich die Animation mit dem Schweif ansehen?

Edit: Doch, ich glaube, jetzt weiß ich was Du meinest: Der kreisförmige Farbverlauf um den Play-/Pause-Button.
 
Zuletzt bearbeitet:
Hallo,
danke, für Deine Antwort.
Genau, das zweite Beispiel ist ein Fremdplayer, der exakt einen Farbverlauf (grün) um den Player kreisen lässt. Nur, das ist ein Bild, was ich nicht habe. Mein Player "wünscht" sich auch so einen Umlauf. Also, das der Farbverlauf um den Player kreist, wenn man den Start-Button klickt.
 
Werbung:
Ich habe da ein wenig mit CSS experimentiert aber ohne befriedigendes Ergebnis. Erfolg versprechender scheint mir zu sein, diesen Bogen mit SVG zu zeichnen und dann mit CSS-blur den Verlauf zu erzeugen. Siehe hier:
www.mediaevent.de

SVG Kreis (circle), Ellipse (ellipse) und Bogenkurve (Arc) | mediaevent.de

SVG Bogenkurven (arc) werden als Pfad mit dem d-Attribut angelegt, für Kreise (circle) und Ellipsen (ellipse) hat SVG spezielle Tags im Repertoire.
www.mediaevent.de www.mediaevent.de
Im Moment fehlt mir aber die Zeit, das auszuarbeiten.
 
OK, danke Dir trotzdem.
Wenn Du mal mehr Zeit hast, kannst Du ja mal sehen. Wäre Dir echt dankbar!
Gruß,
Daniel
 
So, ich habe mich jetzt der Sache angenommen und diesen kreisenden Bogen realisiert:
Code: 
<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="utf-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>
        Circle Shaped Gradient
    </title>
    <style>

    </style>
    <style>
        :root {
            --diameter-play-pause-btn: 100px;
            --diameter-play-pause-wrapper: 120px;
            --blur: 3px;
        }

        .play-pause-wrapper {
            display: grid;
            width: var(--diameter-play-pause-wrapper);
            height: var(--diameter-play-pause-wrapper);
            border-radius: 50%;
        }

        .play-pause-rot,
        .play-pause-btn {
            grid-column: 1/2;
            grid-row: 1/2;
        }

        .play-pause-btn {
            width: var(--diameter-play-pause-btn);
            height: var(--diameter-play-pause-btn);
            align-self: center;
            justify-self: center;
            border-radius: 50%;
            background-color: blue;
            z-index: 10;
        }

        .play-pause-rot {
            align-self: stretch;
            justify-self: stretch;
            filter: blur(var(--blur));
            animation: turn 2s linear infinite;
        }

        @keyframes turn {
            from {
                transform: rotate(0deg);
            }

            to {
                transform: rotate(360deg);
            }
        }

        .play
    </style>
</head>

<body>
    <div class="play-pause-wrapper">
        <svg class="play-pause-rot">
            <defs>
                <lineargradient id="gradient">
                    <stop offset="0%" stop-opacity="0" stop-color="green" />
                    <stop offset="30%" stop-opacity="1" stop-color="green" />
                    <stop offset="70%" stop-opacity="1" stop-color="green" />
                    <stop offset="100%" stop-opacity="0" stop-color="green" />
                </lineargradient>
            </defs>
        </svg>
        <div class="play-pause-btn"></div>
    </div>
    <script>
        const
            color = 'green',
            angle = 180;
        function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
            var angleInRadians = (angleInDegrees - 90) * Math.PI / 180.0;

            return {
                x: centerX + (radius * Math.cos(angleInRadians)),
                y: centerY + (radius * Math.sin(angleInRadians))
            };
        }
        const
            wr = document.querySelector('.play-pause-wrapper'),
            boxWrapper = wr.getBoundingClientRect(),
            btn = document.querySelector('.play-pause-btn'),
            boxBtn = btn.getBoundingClientRect(),
            radius = (boxWrapper.width + boxBtn.width) / 4,
            xCenter = yCenter = boxWrapper.width / 2,
            coordStart = polarToCartesian(xCenter, yCenter, radius, -angle / 2),
            coordEnd = polarToCartesian(xCenter, yCenter, radius, angle / 2),
            strokeWidth = (boxWrapper.width - boxBtn.width) / 2,
            rot = document.querySelector('.play-pause-rot'),
            arc = `<path stroke="url(#gradient)" stroke-width="${strokeWidth}" stroke-linecap="round" fill="none"
                d="M ${coordStart.x} ${coordStart.y} A ${radius} ${radius} 0 0 1 ${coordEnd.x} ${coordEnd.y}" />`;
        rot.insertAdjacentHTML('beforeend', arc);

    </script>
</body>

</html>
Einiges über SVG gelernt und ich bin sehr angetan, was man alles damit machen kann.

Um das abhängig vom Zustand des Players zu machen, sieh dir animation-play-state an:
www.w3schools.com

CSS animation-play-state Property

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com www.w3schools.com
und die Events "play" und "pause" für das audio-Element:

Essential Audio and Video Events for HTML5 — SitePoint

James looks at some of the most important media events, examining what they mean and how they behave in current browsers.
www.sitepoint.com www.sitepoint.com
 
Zuletzt bearbeitet:
Werbung:
Guten Morgen,
ich bin schon sehr gespannt auf das Ergebnis. Noch bin ich unterwegs, werde das am Nachmittag ansehen.
Ich meld mich! Dankeschön!!
Gruß,
Daniel
 
Hallo,
so, jetzt habe ich Zeit, mir Deinen Entwurf anzusehen.
Ich muss sagen, so sieht's exakt so aus, wie ich es für meinen Player wünsche.

Öhm... hüstel... das Problem ist, dass ich Dein Script nur schwerlich auf meinen Player übertragen kann.

Vielleicht könntest *hüstel* öhm... Du mir hier behilflich sein?
 
Wie Du anfangs geschrieben hast, sind die Linien in dem Play-Pause-Button nicht so richtig sauber, die Länge unterscheidet sich ein wenig. Statt das manuell und durch Probieren zu richten habe ich die Linien neu aufgebaut und die Werte mit Javascript berechnet, damit sie genau stimmen. Man hätte das sicher auch mit SVG machen können aber ich bin bei der Lösung mit DOM-Elementen geblieben, siehe Anhang.
Offen ist noch die Animation mit dem Ein- und Ausfliegen der Linien, versuche, das selbst zu ergänzen und melde dich, wenn Du nicht zum Ziel kommst.
 

Anhänge

  • thread1268-audioplayer-animation-10-btn-animate.txt
    7,6 KB · Aufrufe: 3
Werbung:
Hey, danke Dir bis hierhin. Das werde ich im Selbstversuch probieren. Bin natürlich kein Profi. Meine Versuche waren teilweise nicht exakt. Aber, ich melde mich, wenn ich hier noch immer nicht am Ziel bin.
 
Ich habe mir mal Deinen Entwurf angesehen und bin sehr angenehm überrascht, weil Du alles schön strukturiert aufgebaut hast. Durch die Überschriften wusste ich, wo ich was einstellen bzw. Probieren konnte. Sehr übersichtlich von Dir!! Vielen Dank dafür. Denn ich habe so gar keine Ahnung, wie "sowas" funktioniert.

Zunächst habe ich (hoffentlich) erfolgreich die Größe des Players und die Linien verkleinert. Die Farbe des Players habe ich auch ändern können. Zudem war es einfach, meine Stream-URL einzubinden - hat geklappt!

Nun kommen wir zu den Problemen:
Ich habe mich noch nicht daran getraut, die Farbe des umlaufenden Schweifs (bei Play-Klick) zu ändern, in den Farbverlauf: linear-gradient(to right, #2ce1e7 50%, #FF5858 50%, #fe019a). Deine Einstellungen habe ich unter "<lineargradient id="gradient">" gefunden, aber dort etwas zu ändern... nun ja, das traue ich mir nicht zu.

Du hattest selbst dafür "green" eingestellt. Bin mir nicht sicher, ob ich meinen Farbverlauf so hinbekomme.

Da der Player von mir verkleinert wurde, muss natürlich auch der umlaufende Schweif verkleinert werden.

Offen ist noch die Animation der Linien bei "Start", bzw. "Pause". Ich hatte zunächst versucht, mein Script (aus dem Netz) auf Deinen Entwurf anzuwenden - das hätte mir fast den ganzen Player "zerschossen". Also, schnell wieder rückgängig gemacht.

Und dann sollte rechts vom Player eine Volume-Control platziert sein, ebenfalls in der Farbe #2ce1e7. Ich weiss nun nicht, wie groß (klein) die Volume-Control sein soll, wegen der Responsivität der Seite.

Aber, jetzt zu dem bisherigen Ergebnis: https://codepen.io/CGNDaniel/pen/dyLNeao
 
Da der Player von mir verkleinert wurde, muss natürlich auch der umlaufende Schweif verkleinert werden.
Zum Vergrößern anklicken....
Das ist sehr einfach, es passiert durch die folgenden Codezeilen:
Code: 
            // Durchmesser von Button und Wrapper definieren.
            // Die Breite des kreisenden Elementes ergibt sich aus der Differenz.
            btnDiameter = 80,
            wrapperDiameter = 100;
btnDiameter ist der Durchmesser des Buttons und wrapperDiameter der Durchmesser des umschließenden Elementes. Im Raum dazwischen rotiert der Schweif, daher ist seine Breite die Differenz der beiden Werte. Mit diesen Werten sieht es dann wieder gut aus:
Code: 
            btnDiameter = 50,
            wrapperDiameter = 60;

Bei dem Farbverlauf verstehe ich noch nicht so richtig, was Du vor hast. Mit dem, den Du angibst, ergibt sich ein abrupter Wechsel bei 50% von türkis nach blass rot und es erscheint mir unwahrscheinlich, dass das dein Ziel ist. Du hast schon richtig erkannt, dass der Farbverlauf durch dies:
<lineargradient id="gradient">
erzeugt wird. Sieh dir mal das Ergebnis von diesem an:
Code: 
                <!-- background-image: linear-gradient(to right, #2ce1e7 50%, #FF5858 50%, #fe019a); -->
                <lineargradient id="gradient">
                    <stop offset="0%" stop-opacity="0" stop-color="#2ce1e7" />
                    <stop offset="30%" stop-opacity="1" stop-color="#2ce1e7" />
                    <stop offset="70%" stop-opacity="1" stop-color="#FF5858" />
                    <stop offset="100%" stop-opacity="0" stop-color="#fe019a" />
                </lineargradient>
ob es dem nahe kommt, was Du dir wünschst.
 
Werbung:
hitxl_logo.pngAlso, das ist das Logo. Und der Schweif sollte schon eine der Farben haben. Ich dachte eben an einen pinken Farbverlauf, sehr ähnlich in "L". Bin mir aber nicht sicher...
 
In etwa pink:

Code: 
                <lineargradient id="gradient">
                    <stop offset="0%" stop-opacity="0" stop-color="#FF00F4" />
                    <stop offset="30%" stop-opacity="1" stop-color="#FF00F4" />
                    <stop offset="70%" stop-opacity="1" stop-color="#FF00F4" />
                    <stop offset="100%" stop-opacity="0" stop-color="#FF00F4" />
                </lineargradient>
 
Werbung:
Ich habe jetzt die Linien so animiert, dass sie diagonal ein- und ausfliegen.
Lautstärkeregelung mache ich später.
 

Anhänge

  • thread1268-audioplayer-animation-16-fly-in.txt
    8,6 KB · Aufrufe: 3
Werbung:
Uiii... sieht gut aus!! Werde den Player noch anpassen, an Farbe und Größe. Du gehörst zu den Größten!! Vielen lieben Dank!!
 
Für die Lautstärkeregelung empfehle ich, einen Custom-Slider zu verwenden, damit Du das Aussehen beliebig gestalten kannst.

Hier ein Leichtgewicht, nur der Slider:
www.cssscript.com

Lightweight Fast Custom Range Slider Input With JavaScript | CSS Script

A lightweight and customizable JavaScript range slider input library that provides a great way to obtain numerical values from the user.
www.cssscript.com www.cssscript.com

Und hier einer mit erweiterten Möglichkeiten, Skala, Anzeige des Wertes etc.:
www.cssscript.com

Animated Customizable Range Slider In Pure JavaScript - rSlider.js | CSS Script

rSlider.js is a dependency-free JavaScript library for dynamically rendering pretty nice range sliders with custom scales, labels, and tooltips.
www.cssscript.com www.cssscript.com
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben