[Script Review] Webplayer (codepen)

Overzicht

Sponsored by: Vacatures door Monsterboard

Medior Java developer (fullstack)

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 »

Junior .NET developer

Functie Wij zijn bezig met het ontwikkelen van een nieuw product en wij hebben jouw hulp hierbij nodig! Als junior .NET ontwikkelaar krijg jij de kans om samen met ons deze nieuwe uitdaging aan te gaan! Momenteel bestaat ons team uit drie interim Software Engineers. Twee hiervan zijn zeer ervaren .NET specialisten die inmiddels hun strepen in dit vakgebied al hebben behaald. Ook hebben wij een junior als onderdeel van ons team die zich op dit moment nog bezig houdt met de Front-end (Angular/TypeScript), maar zich nu ook meer gaat verdiepen in de backend. Wij willen ons team graag verder

Bekijk vacature »

Developer Angular & Kotlin

Dit ga je doen Het (door)ontwikkelen van mobiele apps en webapplicaties; Het opstellen van technisch ontwerp en het bespreken van ontwerpen met de software architect; Het uitvoeren van werkzaamheden op het gebied van technisch testen; Het in de gaten houden van nieuwe ontwikkelingen op jouw vakgebied en het adviseren van de organisatie hierover. Hier ga je werken Het gaat om een bekend internationaal handelsbedrijf met ruim 800 medewerkers, verdeeld over verschillende deelbedrijven. Deze organisatie is van oorsprong een familiebedrijf, er wordt hard gewerkt, er heerst een no nonsense en doeners mentaliteit, een informele sfeer en er is een mix van

Bekijk vacature »

Medior Java developer (fullstack)

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 »

Android developer

De functie Schiphol is een plek om te reizen, te verblijven en te werken. Door middel van data en technologie richten we op al deze gebieden het leef- en werkklimaat optimaal in en zorgen we voor een slimmere en efficiëntere operatie. Wij ontwikkelen nieuwe producten en diensten vanuit de wensen en behoeften van onze klanten, voorspellen passagier flows en testen digitale oplossingen om rijen en andere pijnpunten in het proces te verminderen. Met slimme feedback van sensortechnologie maken we zelfs data van toiletten en stoelen inzichtelijk en bruikbaar. Het Commercial Platform bestaat uit multidisciplinaire teams met een end-2-end verantwoordelijkheid voor

Bekijk vacature »

Hands-on Solution Architect / Software Architect (

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 Solution Architect / Software Architect op onze locatie Arnhem die hieraan wil bijdragen en misschien ben jij dat wel? Jouw bijdrage aan TenneT Je werkt samen met gedreven DevOps teams, bestaande uit frontend, backend en middleware developers, testers, UX-designers. Samen met de teams ben je continu op zoek naar de beste oplossingen voor onze klanten. Als Solution Architect onderzoek

Bekijk vacature »

C#.NET Developer Jr. Functie

Functie omschrijving Bouw jij graag aan applicaties om processen in distributiecentra te optimaliseren? Wij zijn op zoek naar een C#.NET ontwikkelaar in regio Breda die hier graag een steentje aan bijdraagt! Jouw werkzaamheden zullen er als volgt uitzien: Je krijgt veel vrijheid in de keuze van de technieken die je gaat gebruiken. Uiteraard wel binnen de gestelde kaders, en door gebruik te maken van het .NET platform. Je gaat aan de slag met de ontwikkeling van een nieuwe module binnen de WMS suite van dit bedrijf. Deze "carrier" module gaat er voor zorgen dat de selectie van een vervoerder volledig

Bekijk vacature »

Java developer

Functie Je gaat aan de slag als Tester voor een aantal mooie projecten. Je komt terecht in een DevOps team waar jij aan de slag gaat om de kwaliteit te waarborgen omtrent de maatwerk software voor de klanten. Je draait je hand er niet voor om de adviserende rol te bekleden op het gebied van testautomatisering en het opzetten van testframeworks. Zoals aangegeven ga je daadwerkelijk in het eigen team aan de slag en is het daarnaast ook gebruikelijk bij de klanten op locatie te komen om te werken aan de opdrachten. Je krijgt zodoende echt een mooie kijk in

Bekijk vacature »

PHP Developer

Functie omschrijving Als PHP / Laravel developer zal je in een klein team terecht komen. Wij zijn op zoek naar een echte specialist, iemand die de balans weet te vinden tussen techniek en perfectie. In de aankomende jaren wilt dit bedrijf flink groeien en daarom zijn ze op zoek naar jou! Wat ga je doen? Je draagt bij aan het ontwikkelen en onderhouden van bestaande webapplicaties die boordevol functionaliteit zitten. Deze applicaties worden gebruikt door de organisatie zelf en ook door de klanten. Inmiddels wordt er gewerkt met Laravel 8 en zijn er diverse koppelingen naar externe leveranciers. Verder zal

Bekijk vacature »

Back-end Developer

Functieomschrijving Voor een erkende werkgever in de regio van Middelburg zijn wij op zoek naar een enthousiaste PHP / Symfony Developer. Een ambitieus persoon die het gemotiveerde development team komt versterken met het realiseren van nieuwe en complexe projecten. Ben jij op zoek naar een baan met veel uitdaging binnen een snelgroeiend e-commerce bedrijf, waar je de tijd en ruimte krijgt voor professionele groei? Dit ga je doen: Je bent verantwoordelijk voor de beheer en ontwikkeling van de serviceportal in Symfony en de webshops in de tweede versie van Magento; Je houdt je bezig met het ontwikkelen van nieuwe functionaliteiten;

Bekijk vacature »

Database Developer

Functieomschrijving Wat ga je doen? Als developer ben jij samen met een gemotiveerd team van 10 collega’s verantwoordelijk voor het creëren van aangemeten software voor klanten. Je bent klantvriendelijk en oplossingsgericht ingesteld, omdat het essentieel is om de klanten zo goed mogelijk te helpen met hun uitdagingen. Het is mogelijk om vanuit huis je werkzaamheden uit te voeren, maar het is ook prettig als je in de omgeving van Tilburg woont om naar het kantoor te kunnen komen. Vind jij het leuk om jouw creatieve vaardigheden te benutten om complexe systemen te ontwikkelen? Lees dan snel verder! Bedrijfsprofiel Voor wie

Bekijk vacature »

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 »

Ambitieuze Junior/Medior Low-code Developers gezoc

Bedrijfsomschrijving Transformeer bedrijven met jouw expertise in innovatieve technologie Ben je een bedreven softwareontwikkelaar met ervaring in Low-code platformen, of sta je te popelen om je in deze baanbrekende oplossing te verdiepen? Wij zijn op zoek naar jou! Ons klantenbestand groeit en we willen ons team uitbreiden met deskundige en leergierige Low-code specialisten. Is het jouw passie om organisaties te ondersteunen in hun digitale transformatie en maatwerkoplossingen te bieden met behulp van geavanceerde software? Wij zijn een vooruitstrevend bedrijf dat dagelijks werkt aan het oplossen van complexe vraagstukken om de digitale ambities van onze klanten te realiseren. Functieomschrijving Ontwikkel op

Bekijk vacature »

.NET 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 »

Medior front-end developer gezocht (€3.300 -

Functie Wat ga je doen? Jij als front-end developer gaat werken binnen de teams van/voor onze klant. Je werkt in een team met starters en ervaren ontwikkelaars met allemaal 1 overeenkomst; passie voor het vak. Maak je een fout? Geen probleem, leer ervan en ga dan weer door. Door de variëteit aan werk kun je in verschillende omgevingen een kijkje nemen en jezelf dus snel ontwikkelen. Wat hebben we jou te bieden? • Uitdagende projecten bij mooie klanten (bij jou in de buurt, of binnenkort intern vanuit ons kantoor!) • Een jonge organisatie met talentvolle collega’s • Veel ruimte voor

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

29/03/2024 16:11:39
 
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.