[Script Review] Webplayer (codepen)

Overzicht

Sponsored by: Vacatures door Monsterboard

Senior Java developer (backend)

Wat je gaat doen: Of beter nog, wat wil jij doen? Binnen DPA GEOS zijn we dan ook op zoek naar enthousiaste Java developers om ons development team te versterken. Als Java developer werk je in Agile/Scrum teams bij onze klanten en daarbij kun je eventueel ook andere ontwikkelaars begeleiden in het softwareontwikkelproces. Verder draag je positief bij aan de teamgeest binnen een projectteam en je kijkt verder dan je eigen rol. Je gaat software maken voor verschillende opdrachtgevers in jouw regio. Je bent een professional die het IT-vak serieus neemt en kwaliteit levert. Je leert snel vanwege je diepgaande

Bekijk vacature »

Mendix - Front-end Software Developer

Wat wij bieden een contract voor onbepaalde tijd en goede primaire arbeidsvoorwaarden; een flexibele werkomgeving waar je tijd en plaats onafhankelijk kan werken; een ruim mobiliteitsbudget voor een keuze in een leaseauto of voor je eigen vervoer; een flex benefit budget en collectieve regelingen (o.a. thuiswerkfaciliteiten, korting op je zorgverzekering en bedrijfsfitness); een keuze in een laptop en je ontvangt een telefoonvoucher t.w.v. €290,-; een betrokken community dat gericht is op jouw interesses, teambuilding, gaming en evenementen; onbeperkt opleidingsbudget om je technisch en persoonlijk te blijven ontwikkelen. Wat jij meeneemt je hebt een (technische) HBO of WO-diploma behaald; je bent

Bekijk vacature »

Mendix Developer/Consultant bij PostNL

Mendix Developer/Consultant Den Haag HBO/WO IT - software development Professional "Werk samen met ons om van PostNL een 'logistical tech (driven) company' te maken door Mendix applicaties te bouwen voor onze kritieke logistieke processen". Wat ga je doen? Als Mendix developer kom je te werken in een scrum team binnen onze afdeling 'Pakketten en Logistiek'. Vanuit hier bouwen we alle logistieke software waarmee we gemiddeld 1.1 miljoen pakketten per dag versturen. We hebben met deze afdeling de ambitie om uit te groeien tot het meest efficiënte en innovatieve logistieke post en e-commerce platform in de Benelux. Jouw werk heeft dus

Bekijk vacature »

Backend Java Developer

Functieomschrijving Are you an experienced backend developer who wants to build something that really makes an impact? How does building an entirely new microservices environment to handle contracts, placements, salary payments and invoicing for the world’s largest HR service provider sound? What will you be doing? As backend developer in a scrum team you of course develop user stories, review code and test. Within our teams the role of senior developer also includes: designing and developing scalable and maintainable solutions for all to use; empowering your peers to take ownership, responsibility and accountability of everything we build; identifying and solving

Bekijk vacature »

Fullstack developer (NodeJS, React, AWS)

Functie Als Fullstack developer kom je te werken in het ontwikkelteam, maar zoals gezegd komt er veel meer bij kijken dan alleen maar ontwikkelen. Je bent samen met je collega’s continu bezig om de software uit te breiden maar hiernaast doe je doorlopend onderzoek naar de inzet van bijvoorbeeld Machine Learning. Ze willen met hun software echt voorlopen op andere en toegevoegde waarde leveren voor de eindgebruiker. Mede hierom zijn ze erg benieuwd naar iemand zijn persoonlijkheid, of hij graag nieuwe dingen uitzoekt (Google!), en initiatief neemt. Maar waar staan ze nu? Na een onderzoeksfase van ruim een jaar zijn

Bekijk vacature »

Software Developer / TypeScript / React / Big Data

Dit ga je doen Software development met technieken als TypeScript en React; Meedenken over architectuur en technisch ontwerp; Nieuwe features en flows uitwerken; Nieuwe mogelijkheden onderzoeken; Ondersteunen van junior collega's; Code reviews en bugfixing; Eigen ontwikkeling: waar ligt jouw interesse en waar wil je in groeien? Hier ga je werken Bij dit grote, innovatieve technische bedrijf wil men graag flink groeien dit jaar, namelijk van zo'n 100 naar 120 mensen. In de afgelopen jaren is er hard gewerkt om een nieuw software product op de markt te zetten ter ondersteuning van hun fysieke producten en omdat dit een groot succes

Bekijk vacature »

Delphi developer

Functie Als Delphi developer ga jij aan de slag in een team met twee andere ervaren Delphi programmeurs waaronder de Hoofd programmeur. Als team zijn jullie verantwoordelijk voor de doorontwikkeling van jullie bestaande applicatie. Daarnaast zijn jullie verantwoordelijk voor het onderhouden van deze applicatie en het oplossen van eventuele bugs. Eisen - HBO werk en denk niveau; - Minimaal één jaar ervaring met Delphi; - Goede beheersing van de Nederlandse taal in woord en geschrift; - Jij bent zelfstandig, maar kan ook in team verband werken. Aanbod - €3000,-- €4000,- op basis van jouw kennis en ervaring; - 8% vakantiegeld;

Bekijk vacature »

Fullstack Developer / Aurelia / C#

Dit ga je doen Je werkzaamheden bestaan onder andere uit: het ontwerpen en bouwen van diverse applicaties en functionaliteiten middels Aurelia, Open Layers en Signal R; meedenken (met de Product Owner) over User Stories, requirements en doorontwikkeling van de applicatie(s); samenwerken in een DevOps team middels Agile/Scrum. Hier ga je werken Als Fullstack Developer kom je te werken bij een gerenommeerde organisatie in de regio Ede waar gewerkt wordt aan een bedrijfskritische applicatie die opereert binnen een complexe IoT- en webbased omgeving. Deze oplossingen worden internationaal uitgerold en worden zeer veel gebruikt in de infra branche. Samen met je team

Bekijk vacature »

Software Developer C# niche markt

Bedrijfsomschrijving Wil jij aan de slag met het ontwikkelen van unieke en dagelijks uitdagende software en zoek je een nieuwe baan in Rotterdam? Dan zou dit software development bedrijf wat voor jou kunnen zijn! Wij zijn voor deze klant van ons op zoek naar een sterke allround Software .NET Developer, die bedreven is in het ontwikkelen van hoogwaardige maatwerk (web)applicaties vanuit specifieke wensen van klanten. Deze organisatie is actief in een bijzonder niche van de markt: Zij ontwikkelen softwareproducten voor bijvoorbeeld opleiders, zorginstanties en uitgevers, allemaal in het kader van opleiden. Er worden standaardproducten gemaakt, maar ook wordt er gewerkt

Bekijk vacature »

Java Developer / Back-end Developer / 5000 euro

Dit ga je doen Het ontwikkelen van applicaties en websites met behulp van Java en Spring; Werken aan lange termijn projecten; Oppakken van ad hoc activiteiten en processen; Nieuwe ontwikkelingen in de gaten houden en toepassen; Analytisch en kritisch meedenken over verbeteringen in tools en werkwijzen. Hier ga je werken Onze klant is een high traffic organisatie die kwaliteit en digitale transformatie hoog in het vaandel heeft staan. Het is een dynamische en autonome organisatie gevestigd in hartje Amsterdam. Het professionele team waar je in komt te werken is multidisciplinair. Het team werkt erg nauw samen en gebruiken gezamenlijk Scrum

Bekijk vacature »

Full stack developer

Functie Binnen een ontzettend stimulerende werkomgeving kom jij te werken in een software team van 14 developers. Met ontzettend stimulerend bedoel ik een modern pand, wat voorzien is van alle nodige soft- en hardware, zodat jij jouw werk goed kan uitvoeren. Daarnaast zitten ze in een bos, waardoor je in een groene omgeving rustig kunt werken. Het team bestaat uit front end, back end en full stack developers. Jij krijgt dus de keuze hier waar jij jezelf het liefst op zou richten, maar de voorkeur gaat uit naar back end. Er wordt hier Scrum (agile) gewerkt in multidisciplinaire teams met

Bekijk vacature »

CICD Engineer Developer

Your contribution to TenneT You will work within our multi-disciplinary CI/CD DevOps team. Together with architects, lead developers and engineers you align to identify improvements for the Developer Experience within TenneT. You will define, design, develop, build and run cloud native CI/CD platform services and opionated pipelines that will be: - available on-demand, through self-service automation for DevOps teams, fully documented, tested and secure - high available, disaster resilient - integrated with infra-as-code / config-as-code automation Next to above mentioned tasks you will define standardized building blocks, provide suggestions and tools to help development decrease lead time. You will ensure

Bekijk vacature »

API Developer / Red Hat Fuse

Dit ga je doen Als API Developer zal je verantwoordelijk zijn voor het: het maken van API's en het correct laten draaien van de API's op het platform. Hierdoor kom je in aanraking met Red Hat Fuse, Springt Boot, 3Scale, Red Hat SSO, Openshift en Azure DevOps; zorgen voor de kwaliteit van de ontwikkeling, integratie en prestaties van de API's; zorgen voor een stabiel integratieplatform. Hier ga je werken Deze organisatie is een toonaangevende speler in de vastgoedbranche en telt momenteel ruim 500 medewerkers. Met meer dan 150 applicaties staat er een complex applicatielandschap dat hoofdzakelijk op OpenShift, Azure en

Bekijk vacature »

Medior Back End Developer

Collega’s maken het verschil. Daarom is het leuker werken bij Bending The Rules. Want naast dat we serieuze software vraagstukken oplossen, zijn wij niet het typische IT bedrijf. Naast programmeurs zijn we ook bevlogen BBQ chefs, bierbrouwers, competitieve gewichtheffers en houden we van een festivalletje. Kortom, we zoeken een leuke collega die ook nog eens echt goed is in zijn werk. Ben jij die persoon. ANDERE VOORDELEN VAN WERKEN BIJ BENDING THE RULES We starten altijd met een contract van 7 maanden. Waren deze succesvol? Dan belonen wij jou met een vast contract én een loonsverhoging of een lease auto

Bekijk vacature »

Integratie Developer Mulesoft

Dit ga je doen - Je ontwikkelt en onderhoudt diverse interne integraties en externe (klant) integraties; - Je ontwikkelt middels het integratieplatform Mulesoft; - Je automatiseert een geheel end-to-end proces en je zorgt hierbij voor de juiste interfaces; - Je test en implementeert de interfaces; - Je adviseert de interne en externe klant en initieert verbetervoorstellen; - Je haakt incidenteel aan bij overleggen met de externe klant om de wensen en specificaties om te zetten in de juiste technische oplossing. Hier ga je werken Voor een bekend servicegericht bedrijf zijn wij op zoek naar een Integratie Developer Mulesoft. Het is

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

01/10/2022 19:52:31
 
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.