PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact

[Script Review] Webplayer (codepen)

Door G P op 25-11-2014 19:48
10.319 views
Een eigen musicplayer gemaakt... Wat is jullie gedacht hierover?

http://codepen.io/anon/pen/wBaear
Wouter Van Marrum
25-11-2014 19:53
Ziet er goed uit zoals ik het nu zie, misschien idee om van je volume knoppen slider te maken ?
- Ariën -
25-11-2014 19:54
En een toggle van je play/pauze knop.
G P
25-11-2014 19:56
De volgende stap is om de knoppen te vullen met de symbolen van play/stop/pauze in css3. Een toggle toe te voegen en de volumeknoppen te veranderen met een kleine en grote luidspreker.
Simo Mr
25-11-2014 22:39
Mooi gemaakt, en werkt perfect.

maar het kan beter.

Ik denk dat je dit code beter via javascript kan genereren.


<article class="audioPlayer">
	<p id="timer" class="blackGradient">00:00</p>
	<p id="balk" class="blackGradient"><span id="move"></span></p>
	<form action="" method="post" enctype="multipart/form-data" class="blackGradient">
		<input class="blackGradient" type="button" name="volDown" id="volDown" value="Vol-" onClick="javascript:audioVolume('-');">
		<input class="blackGradient" type="button" name="pauze" id="pauze" value="Pauze" onClick="javascript:audioPauze();">
		<input class="blackGradient" type="button" name="play" id="play" value="Play" onClick="javascript:audioPlay();">
		<input class="blackGradient" type="button" name="stop" id="stop" value="Stop" onClick="javascript:audioStop();">
		<input class="blackGradient" type="button" name="volUp" id="volUp" value="Vol+" onClick="javascript:audioVolume('+');">
	</form>
	<p>Volume: <span id="volume">100</span>%</p>
    <marquee class="blackGradient" behavior="scroll" direction="left" loop="0" scrollamount="3">Jan Smit &amp; Roos Van Erkel - Sla je armen om me heen</marquee>
</article>


je kan ook DOM events gebruiken in plaats van functions.
Wouter Van Marrum
06-12-2014 18:52
Ziet er mooi uit, slim gedaan om volume knoppen en slider te geven.
G P
06-12-2014 19:23
Alles is met CSS, geen afbeeldingen
G P
12-04-2020 10:50
Marquee opgelost. Vervangen door keyframes

Reageren

Inloggen om te reageren