[Script Review] Webplayer (codepen)

Overzicht

Sponsored by: Vacatures door Monsterboard

Functioneel applicatiebeheerder - SOP-SYS-SAM

TenneT is hard groeiend om de onze ambities waar te kunnen maken. Zo nemen wij een leidende rol in het aanjagen van de energietransitie. Het werven van nieuw talent speelt daarin een cruciale rol. Wij zijn op zoek naar een gedreven Functioneel Applicatiebeheerder op onze locatie Arnhem die hieraan wil bijdragen en misschien ben jij dat wel? Jouw bijdrage aan TenneT Je gaat samenwerken in een team van circa 15 functioneel applicatiebeheerders en gaat onderdeel uitmaken van een DevOps team. Met dit team ga je applicaties (laten) ontwikkelen en beheren. Hierbij concentreer je je vooral op de functionele aspecten, zodat

Bekijk vacature »

Oracle APEX developer

Wat je gaat doen: Als Oracle APEX ontwikkelaar bij DPA werk je samen met collega’s aan de meest interessante opdrachten. Je zult je ervaring met SQL, PL/SQL, JavaScript, HTML en CSS inzetten om wensen van opdrachtgevers te vertalen naar technische oplossingen. Je werk is heel afwisselend, omdat DPA zich niet beperkt tot een specifieke branche. Zo ben je de ene keer bezig binnen de zorgsector, de andere keer is dit bij de overheid. Wat we vragen: Klinkt goed? Voor deze functie breng je het volgende mee: Je hebt een hbo- of universitaire opleiding afgerond Je hebt 2 tot 5 jaar

Bekijk vacature »

Full stack developer

Wat ga je doen als Full stack .NET developer Microsoft 365? Je stelt je op als sparringpartner voor het team en PO over toekomstige functionaliteiten, architectuur en mogelijke nieuwe producten. Je bent mede-verantwoordelijk voor het vertalen en omzetten van een user story in een passend technisch design. Je implementeert functionaliteiten op basis van een technisch design en user story. Je bent mede-verantwoordelijk voor het beheer van Azure DevOps, waaronder het beheer van GIT, Build Pipelines, Release Pipelines en geautomatiseerde testen. Hier herken jij jezelf in Hbo werk- en denkniveau of hoger aangevuld met relevante certificeringen en/of cursussen; Minimaal 3 jaar

Bekijk vacature »

Gezocht: .Net ontwikkelaars met een maatschappelij

Bedrijfsomschrijving Zoek jij als medior .Net ontwikkelaar een inspirerende werkplek bij een bedrijf met maatschappelijk verantwoordelijkheidsgevoel? Dan is deze vacature je op het lijf geschreven. De organisatie bestaat ruim 20 jaar en ze ontwikkelen in house applicaties waarmee de zorgsector enorm mee gebaat is. Jouw applicaties worden gebruikt door duizenden gebruikers waardoor je echt een waardevolle bijdrage kan leveren aan de maatschappij. Het bedrijf is zeer innovatief en vindt een goede werk/privé balans belangrijk. Je krijgt alle mogelijkheden om jezelf verder te ontwikkelen, je werktijden in te delen en daarnaast is het ook mogelijk om deels thuis te werken. Het

Bekijk vacature »

Lasrobot Programmeur

Over de functie Off-line programma’s maken die het beste resultaat bij de lasrobot mogelijk maken De programma’s met behulp van teach verder optimaliseren Proactief meedenken over oplossingen en over de juiste invulling van lasmallen Het lasrobotproces zoveel mogelijk optimaliseren Over het bedrijf Onze opdrachtgever is gespecialiseerd in de engineering, productie en assemblage van samengestelde plaatwerkproducten en monodelen uit metaal. Onze klant werkt samen met het team aan de mooiste producten van de toekomst. Binnen dit bedrijf staat een sterk team van specialisten op het gebied van industrial design, mechanical engineering, in-house prototyping en all-round projectmanagement. Met daarbij uiteenlopende kennis in

Bekijk vacature »

Senior .NET developer

Functie As a Senior .NET developer you will work in our Research & development team. Our team consists of 17 colleagues! We are currently busy setting up a completely new architecture for a new product. We use VS2022 and .NET 6.0 for our new product. Your function is therefore mainly backend oriented. Since we develop measuring equipment for the chemical industry, it is also very important to develop high-quality software for its control. You are also responsible for designing, implementing and testing new features. For this position its also very important to ensure future-proof and sustainable architecture. Eisen - A

Bekijk vacature »

Junior Java Developer

Dit ga je doen Je ontwikkelt innovatieve, maatschappelijk belangrijke applicaties; Je implementeert nieuwe features; Je gaat in gesprek met eindgebruikers en designers om de applicaties continu te finetunen; Je draait mee in een professionele Agile/Scrum omgeving. Hier ga je werken Onze klant is een internationale organisatie gevestigd in de omgeving van Amsterdam. Ze staan zeer goed bekend in de markt door hun innovatieve dienstverlening op IT gebied en hun gepassioneerde werknemers. Voor hun inspanningen op het gebied van IT hebben ze meerdere prijzen gewonnen! Onze klant is onderdeel van een Corporate werkgever en heeft zelf 300 mensen in dienst. Om

Bekijk vacature »

C#.NET ontwikkelaar

Functieomschrijving Voor een gewaardeerde werkgever in regio Tilburg zijn wij op zoek naar een C#.NET ontwikkelaar. Je bent verantwoordelijk voor het ontwikkelen van dashboards, webapplicaties en apps voor de eigen IOT-oplossingen. Samen met een vooruitstrevend team van ontwikkelaars en engineers krijgen jullie de opdracht om de sensoren in de apparatuur te scannen en vervolgens de data om te zetten in belangrijke inzichten voor de klanten. Taken en verantwoordelijkheden: Heb jij ideeën over nieuwe technieken die jullie kunnen implementeren? Hier wordt echt naar je geluisterd en gekeken of jouw idee daadwerkelijk ingezet kan worden; Je gaat aan de slag met de

Bekijk vacature »

PHP ontwikkelaar

Functie Met een complex en uitgebreid e-commerce platform, een eigen PIM-systeem en eigen scan applicatie – krijg jij dagelijks te zien hoe jouw werk gebruikt wordt door miljoenen gebruikers. En we staan qua development pas in de startblokken, aangezien er nog meerdere projecten op de plank liggen te wachten! Ons huidige development team bestaat uit 8 programmeurs. Er wordt dagelijks gereflecteerd op geschreven code, Scrum taken en kennisdelen onderling is een must. Onze voertaal binnen ons team is Engels, dit omdat wij twee internationale collega’s hebben. Ons huidige “IT Landschap” bestaat voornamelijk uit allerlei losse onderdelen die individueel, maar ook

Bekijk vacature »

Software ontwikkelaar

Ben jij graag bezig met verschillende projecten? Vind jij beleving van klanten én medewerkers ook belangrijk? Wij zijn vanwege de doorontwikkeling van het applicatielandschap van onze opdrachtgever op zoek naar een fulltime software ontwikkelaar. Omschrijving Jij en jouw collega’s zijn verantwoordelijk voor de continuïteit en waarborging van het applicatielandschap. Om de processen vloeiend te laten verlopen is software ontwikkeling daarom van essentieel belang. Onze opdrachtgever doet dit voornamelijk zelf, met door hun eigen ontwikkelde applicaties. Dit betekent dat jij: functionele eisen vertaalt naar gebruiksvriendelijke software; tijdens SCRUM sessies advies geeft over het te bouwen ontwerp; nieuwe software ontwikkelt en het

Bekijk vacature »

Teamlead PHP Developer

Functieomschrijving Voor een gewaardeerde werkgever in de buurt van Middelburg zijn wij op zoek naar een gemotiveerde teamlead PHP developer met affiniteit met Symfony/Laravel. Een enthousiast persoon die het ontwikkelteam komt versterken met het aanpakken van uitdagende projecten. Ben jij op zoek naar een uitdaging waar je de tijd en ruimte krijgt jezelf te ontwikkelen en je eigen IT-team aan te sturen? Lees dan snel verder! Die ga je doen: Bijdragen aan de implementatie van aanpassingen, verbeteringen en aanvullingen in de PHP based applicaties; Ontwikkeling en beheer van de serviceportal in Symfony en de webshops in de tweede versie van

Bekijk vacature »

IT Manager team PaaS

TenneT is hard groeiende om haar ambities waar te kunnen maken. Zo nemen wij een leidende rol in het aanjagen van de energietransitie. Het werven van nieuw talent speelt daarin een cruciale rol. Wij zijn op zoek naar een gedreven Lead PaaS die hieraan wil bijdragen en misschien ben jij dat wel? Jouw bijdrage aan TenneT Je wordt de Teammanager (Lead) van een nieuw team binnen de afdeling Basic van Information Technology and Facilities (ITF) van TenneT. Het team heet Platform as a Service. Hier wordt elke dag in een goede sfeer met zijn allen hard gewerkt om vanuit IT

Bekijk vacature »

Junior PHP Developer

Functieomschrijving Junior PHP Developer gezocht! Voor een opdrachtgever in de regio Gelderland zijn wij op zoek naar een Junior PHP Developer die onderdeel gaat worden van het ontwikkelingsteam van deze organisatie. In deze functie ga jij aan de slag met het schrijven van software voor de aansturing van en het managen van windparken en bijbehorende onderdelen. Hiernaast ga jij je bezighouden met het ontwikkelen, testen en onderhouden van diverse webapplicaties. Het team waarin je komt te werken bestaat uit 3 developers, hierdoor krijg je veel verantwoordelijkheid en de kans om jezelf verder te ontwikkelen. Er wordt echter wel van je

Bekijk vacature »

Senior .NET developer

Klaar voor een nieuwe uitdaging? Welke technologieën gaan schuil achter de dagelijkse energievoorziening? Als senior .NET developer bij Kenter maak jij samen met je team het verschil, zowel voor de interne organisatie als voor eindklanten. Samen bouwen jullie aan innovatieve dienstverlening met behulp van de nieuwste technologieën en tools. Het is een functie met veel vrijheid, goede arbeidsvoorwaarden én je draagt jouw steentje bij aan de energietransitie. Klinkt dit als iets voor jou? Lees dan verder of solliciteer direct! Wat ga je doen als senior .NET developer? Als senior .NET developer bij Kenter (onderdeel van Alliander) ben je van onschatbare

Bekijk vacature »

Low Code Developer - Consultant

Functie omschrijving Wil jij fungeren als een spin in het web en samenwerken met klanten? Voor een leuke en interessante opdrachtgever in omgeving Leiden zijn wij op zoek naar een Low Code developer die zich bezig gaat houden met het optimaliseren van bedrijfsprocessen bij klanten en het leiden van projecten. Ben jij toe aan een nieuwe uitdaging en heb jij verstand van datamodellering en NO CODE Platformen? Lees dan snel verder! Bij deze rol horen de volgende werkzaamheden: Je gaat geen code kloppen maar bedenken hoe applicaties eruit moet komen te zien. Je gaat werken met een non code platform,

Bekijk vacature »
G P

G P

25/11/2014 19:48:01
Anchor link
Een eigen musicplayer gemaakt... Wat is jullie gedacht hierover?

http://codepen.io/anon/pen/wBaear
 
PHP hulp

PHP hulp

26/05/2026 11:17:09
 
Wouter Van Marrum

Wouter Van Marrum

25/11/2014 19:53:50
Anchor link
Ziet er goed uit zoals ik het nu zie, misschien idee om van je volume knoppen slider te maken ?
 
- Ariën  -
Beheerder

- Ariën -

25/11/2014 19:54:21
Anchor link
En een toggle van je play/pauze knop.
 
G P

G P

25/11/2014 19:56:50
Anchor link
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

Simo Mr

25/11/2014 22:39:12
Anchor link
Mooi gemaakt, en werkt perfect.

maar het kan beter.

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

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
<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.
 
G P

G P

06/12/2014 17:47:02
 
Wouter Van Marrum

Wouter Van Marrum

06/12/2014 18:52:26
Anchor link
Ziet er mooi uit, slim gedaan om volume knoppen en slider te geven.
 
G P

G P

06/12/2014 19:23:36
Anchor link
Alles is met CSS, geen afbeeldingen
 
G P

G P

12/04/2020 00:47:39
 
Jan R

Jan R

12/04/2020 07:30:53
 
G P

G P

12/04/2020 10:50:04
Anchor link
Marquee opgelost. Vervangen door keyframes
 
Nick Vledder

Nick Vledder

12/04/2020 17:37:25
Anchor link
Het resultaat ziet er al erg mooi uit. JS-code goed nalopen en nagaan of je alles in de global scope wilt knallen. Denk ook even aan gebruik let, const. Zoals al eerder genoemd, JS onderbrengen in extern js-bestand komt leesbaarheid ten goede (daar ook de events in onder brengen en koppelen aan de DOM-elements).
 
- Ariën  -
Beheerder

- Ariën -

12/04/2020 17:44:11
Anchor link
Ik ben niet bekend met de media-API, maar kan je niet ervoor zorgen dat je kan seeken naar een bepaalde plek van het liedje?
Ook zou een wat moderner letterype voor de afspeelduur wel een idee zijn.
Misschien is een keuze om de afspeeltijd, of de aflopende duur te zien ook een idee? Soms wil je namelijk weten hoelang het nog duurt.

Verder is het een leuk script.
Gewijzigd op 12/04/2020 17:44:32 door - Ariën -
 
 

Dit topic is gesloten.



Overzicht

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.