[Script Review] Webplayer (codepen)

Overzicht

Sponsored by: Vacatures door Monsterboard

Full Stack PHP Developer

Functieomschrijving Ervaren PHP Developer gezocht! Wij zijn op zoek naar een ervaren PHP Developer die het IT team van een organisatie in de regio Ermelo gaat versterken. Voor deze functie zijn we op zoek naar een enthousiaste en breed georiënteerde IT-er die deze innovatieve organisatie nog een stap verder gaat brengen. Wij zijn op zoek naar iemand die communicatief goed is en die zelfstandig problemen op kan lossen. Je bent verantwoordelijk voor het samenwerken met een externe partij het is hierbij jouw taak om deze partij uit te dagen op het geleverde werk. Het schrijven van concepten aan de AI

Bekijk vacature »

.NET developer

Functie As a .NET developer you start in a driven and diverse development team. Your team consists of 16 IT professionals, including 7 software engineers. Because your new employer is internationally active, there are also international IT professionals working in the IT department. As a result, the official language is English. As a team you are responsible for a new Cloud Native product. This product runs entirely in Azure with a Progress Database and various Azure Functions. In addition, this product has a JS front-end, a REST API system and a layer in C # .NET. The idea is therefore

Bekijk vacature »

C# .NET Developer

Dit ga je doen Als developer nieuwe gave features implementeren; Werken met technieken als C# .NET en (REST) API's webservices; Ontwikkelen van koppelingen middels API's; Maken van technische keuzes en beslissingen over de architectuur; Junior collega's coachen; Initiatief nemen voor nieuwe technische mogelijkheden; Je bent een belangrijke schakel - en vindt het leuk - om te schakelen met de business. Hier ga je werken In een klein team van professionals ben je als C# .NET Developer verantwoordelijk voor het ontwikkelen van één van de applicaties voor het grootste inhouse product: een applicatie voor alles omtrent hypotheken. De programmeertaal die je

Bekijk vacature »

PHP Developer

Zie jij mogelijkheden om onze tooling technisch te verbeteren en uit te bouwen? Over Jobmatix Jobmatix is een innovatieve en internationale speler op het gebied van jobmarketing. Onze jobmarketing automation tool helpt organisaties bij het aantrekken van nieuw talent door vacatures digitaal, geautomatiseerd en op een efficiënte manier te adverteren en onder de aandacht te brengen bij de doelgroep op 25+ jobboards. Volledig performance-based, waarbij organisaties betalen op basis van cost per click of cost per applicant. Maandelijks wordt onze jobmarketing automation tool al gebruikt door vele directe werkgevers, intermediairs en mediabureaus, waaronder Picnic, Rijkswaterstaat, AdverOnline, Schiphol, DPA, Teleperformance en

Bekijk vacature »

Back end developer PHP

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 »

Front end developer React Sportgames

Functie Als Front end developer ga jij aan de slag bij een gave en bekende organisatie op het gebied van sportgames. Jij gaat aan de slag in een scrumteam met 6 developers die gepassioneerd en actief bezig zijn om spelers kwalitatieve en mooie spelervaringen aan te bieden. Als scrumteam werken ze in drie wekelijkse sprints en begin je iedere ochtend met een stand-up. Als Front end developer werk jij bij deze organisatie voornamelijk met Javascript, html, css en React. Er wordt veel gebruikt gemaakt ook van C#, Docker en Kubernetes. Het team hecht veel waarde aan het leveren van hoogwaardige

Bekijk vacature »

Front end developer

Functie Jij als ervaren Front end developer bent een expert het gebied van Javascript en React. Je wordt onderdeel van een multidisciplinair team bestaande uit een PO, twee Front end developers, een DevOps/Back end developer, een UX/UI designer en een projectmanager. Verder is er iemand verantwoordelijk voor de HR en is de algemeen directeur nauw betrokken bij alle projecten. Dagelijks hou jij je bezig met de verschillende projecten die zijn opgenomen in de sprint. Daarnaast denk je mee over mogelijke oplossingen om de behoefte van de klant op de beste manier in te vullen. Verder spar jij intern met collega’s

Bekijk vacature »

Junior Software Developer

Functie omschrijving Wij zijn op zoek naar een Junior Software Developer .NET, C# voor een gaaf bedrijf in de omgeving van Utrecht! Sta jij aan het begin van je carrière en heb je net je HBO of WO-diploma in de richting van ICT of Techniek mogen ontvangen? En heb jij grote affiniteit met software development? Lees dan snel verder! Voor een opdrachtgever in de omgeving van Utrecht, zijn wij op zoek naar een Junior Software Developer. Werk jij graag aan verschillende projecten en ga je graag klanten op bezoek? Dan is dit de ideale functie voor jou! Binnen deze functie

Bekijk vacature »

Front-end developer - working on software for arou

Functie They have recently started looking for an experienced Front-end (mobile/app) developer. Because of the short lines within the team, they are also looking for someone who can communicate with the service desk, sales and support for technical questions. You will join their IT team consisting of about 10 colleagues divided over two teams in rooms opposite each other. Half of these are involved in their front-end. You will work together with, among others, the Architect, 1 senior, 1 junior and there is a Team Leader. In terms of technology, they work with a unique tech-stack, particularly because of the

Bekijk vacature »

C# .NET Backend Developer HBO Javascript

Samengevat: Deze werkgever is een professionele speler op gebied van IT en E-Commerce. Wil jij werken voor een e-commerce platform? Heb je ervaring met C#, Javascript en Scrum? Vaste baan: C# .NET Developer Backend E-Commerce 3.400 - 4.500 Backend Developer Wij ontwikkelen software voor E-Commerce toepassingen. Ons eigen Content Management systeem biedt een integrale oplossing met diverse ERP software. Onze systemen zijn vaak complex en omvangrijk en draaien bij grote organisaties. Maar ook kleine ondernemingen hebben steeds vaker behoefte aan een vlekkeloos werkende E-Commerce oplossing. Zij bieden een uitdagende werkomgeving met gezellige collega's. Je krijgt veel vrijheid en er is

Bekijk vacature »

Software Ontwikkelaar

Functieomschrijving In deze uitdagende functie als Software Developer ga je de volgende taken uitvoeren: Maatwerk back-end software programmeren; API koppelingen bouwen; Software optimaliseren voor klanten; Bouwen maatwerk applicaties; Werken met Microsoft stack zoals C#, .NET (Core) en Entity framework; Bedrijfsprofiel Je gaat werken bij een klein softwareontwikkelingsbureau, die maatwerk software bouwt voor klanten door heel Nederland. Dit doen zij al meer dan 20 jaar. Het is van oorsprong een familiebedrijf, opgezet door de eigenaar, die er nog steeds werkt. Het team bestaat vooral uit back-end developers en één systeembeheerder. Je krijgt veel kans om jezelf te ontwikkelen en krijgt tevens

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 »

C# developer

Sogeti is een organisatie met een goede werksfeer en zo min mogelijk hiërarchische verhoudingen. Ga je bij ons als C# Developer aan de slag? Dan werk je dagelijks met collega’s aan de mooiste IT-projecten. Deze snelgroeiende groep collega’s krijgt energie van hun vak en dat merk je op de werkvloer. Natuurlijk krijg jij de mogelijkheid je te certificeren. We organiseren regelmatig technische Meet-ups en doen we veel aan kennisdeling. Mede hierdoor zij wij dit jaar Microsoft Partner of the Year geworden. Sogetisten staan klaar voor elkaar, hebben lol met elkaar en daarmee behalen we de mooiste resultaten! Werken bij Sogeti

Bekijk vacature »

Ervaren C#.NET programmeur

Functieomschrijving Voor een moderne werkgever in regio Prinsenbeek zijn wij op zoek naar een ervaren C#.NET programmeur die graag de uitdaging aangaat. Je houdt je bezig met het ontwikkelen van maatwerk webapplicaties voor diverse klanten, waarbij complexe processen optimaal worden ondersteund. Verder ziet jouw takenpakket er als volgt uit: Ontwikkelen en onderhouden van C#.NET-applicaties; Schrijven van hoogwaardige, herbruikbare codes; Schrijven van technische documentatie en gebruikershandleidingen; Bijdragen aan het ontwerp en de architectuur van softwaretoepassingen; Troubleshooten en oplossen van bugs in softwaretoepassingen; Werken met databases en dataopslagoplossingen; Implementeren van beveiligingsoplossingen en het waarborgen van de beveiliging van applicaties en gegevens. Bedrijfsprofiel

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

28/03/2024 16:48:01
 
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.