Audioplayer mit Effekt

html.de-Forum HTML, XHTML & CSS
1

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

2

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.

3

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.

4

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:
https://www.mediaevent.de/tutorial/svg-circle-arc.html
Im Moment fehlt mir aber die Zeit, das auszuarbeiten.

5

OK, danke Dir trotzdem.
Wenn Du mal mehr Zeit hast, kannst Du ja mal sehen. Wäre Dir echt dankbar!
Gruß,
Daniel

6

So, ich habe mich jetzt der Sache angenommen und diesen kreisenden Bogen realisiert:

[CODE]

<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>
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>
[/CODE]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:
https://www.w3schools.com/cssref/css3_pr_animation-play-state.php
und die Events „play“ und „pause“ für das audio-Element:
https://www.sitepoint.com/essential-audio-and-video-events-for-html5/

7

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

8

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?

9

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.

10

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.

11

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 „“ 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

12

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

Das ist sehr einfach, es passiert durch die folgenden Codezeilen:

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

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:
[iCODE][/iCODE]
erzeugt wird. Sieh dir mal das Ergebnis von diesem an:

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

13

[ATTACH type=„full“]6113[/ATTACH]Also, 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…

14

In etwa pink:

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

15

Oh… ja, so schauts besser aus! Danke!!

16

… und ich habe mal die Farbe des Players genommen, sieht als Schweif auch nicht schlecht aus!

17

Jetzt fehlen noch die aninmierten Linien bei Start und Stopp und einen Volume-Control, rechts des Players. :wink:

18

Ich habe jetzt die Linien so animiert, dass sie diagonal ein- und ausfliegen.
Lautstärkeregelung mache ich später.

19

Uiii… sieht gut aus!! Werde den Player noch anpassen, an Farbe und Größe. Du gehörst zu den Größten!! Vielen lieben Dank!!

20

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:
https://www.cssscript.com/custom-range-slider-input/

Und hier einer mit erweiterten Möglichkeiten, Skala, Anzeige des Wertes etc.:
https://www.cssscript.com/animated-customizable-range-slider-pure-javascript-rslider-js/