[Script Review] Webplayer (codepen)

Overzicht

Sponsored by: Vacatures door Monsterboard

Back end developer

Functie Jij als full stack ontwikkelaar komt te werken in een team bestaande uit 4 back end programmeurs, 2 vormgevers/ Front end developers en een online marketeer. Qua persoonlijkheden is het team erg gevarieerd van sportfanaten tot gameliefhebbers en Golfers. Een ding heeft iedereen hier gemeen; Passie voor goede code. In jouw rol zul je voor 90% van je tijd je bezig houden met het ontwikkelen van grote maatwerk applicaties. Daarnaast hebben wij op aanvraag ook wel eens een website of onderhoudsklusje, die opgepakt moet worden en hier ben jij ook niet vies van. De technische uitdaging momenteel is dat

Bekijk vacature »

Cloud Engineer

Ben jij een ervaren Cloud Engineer die complexe omgevingen kan overzien en wil je graag in vaste dienst werken bij een professioneel en kleinschalig bedrijf waar je een belangrijke rol kan spelen? Wij, IntelliMagic in Leiden, ontwikkelen specialistische IT monitoring software die we als SaaS oplossing verkopen aan grote bedrijven in Europa en de VS. We zijn een Nederlands bedrijf met een goede sfeer en met grote waardering voor de persoonlijke inbreng en kwaliteiten van onze medewerkers. Wij zoeken een ervaren Cloud Engineer met academisch denkniveau die verantwoordelijk wordt voor het beheer van de cloud infrastructuur voor onze Europese klanten.

Bekijk vacature »

Lead C++ Developer

The role of Lead C++ Developer As Lead C++ Developer at KUBUS you will be responsible for the implementation design of requirements and the software architecture of the desktop applications of BIMcollab, our platform for 3D model validation and issue management aimed at improving the quality of 3D building design models. Better 3D models lead to better buildings, thus contributing to the sustainability of the built environment with smarter use of materials, less waste and energy-efficient buildings. A good user experience is of paramount importance to us; we go for innovation and quality in our development. In your role as

Bekijk vacature »

PHP Developer

As a PHP Developer at Coolblue, you ensure that our webshops work as optimal as possible. How do I become a PHP Developer at Coolblue? As a PHP Developer you work together with other development teams to make our webshop work as optimal as possible and to make our customers happy. Although you are a PHP Developer, you are not averse to a little TypeScript or other technologies that might be used. Would you also like to become a PHP Developer at Coolblue? Read below if the job suits you. You enjoy doing this Writing vanilla PHP code. Working with

Bekijk vacature »

Medior/senior Front-end developer

Functie Je maakt deel uit van een DevOps Scrum team en werkt samen met back-end developers, test-engineers, interaction designers en een projectmanager. Er zijn verschillende groepen Scrum teams. Een roadmap team is jouw ‘’thuisbasis’’, daar wordt gewerkt aan doorontwikkeling van bestaande omgevingen voor een aantal klanten. Hiernaast zijn er projectteams waar nieuwe omgevingen worden gebouwd, of grote complexe wijzigingen worden doorgevoerd op bestaande omgevingen. Je kunt (afhankelijk van jouw wensen en doelen) dus afwisselend werken in beide teams. Hiernaast participeer je in het Chapter Front-end development waar gezamenlijk kennis en ervaring wordt gedeeld. Als Front-end developer is het jouw doel

Bekijk vacature »

Back End Developer .NET

Dit ga je doen Ontwikkelen in C# .NET en werken aan nieuwbouw, uitbouw en onderhoud van de software (die communiceren met 68.000 sensoren, waardoor er meerdere miljoenen berichten per uur verwerkt worden); Samenwerken in Scrum Teams; Meewerken aan verschillende, uitdagende projecten; Werken met nieuwe technologieën en vrijheid krijgen om jezelf te ontwikkelen en door te groeien. Hier ga je werken Je komt als Developer te werken bij een organisatie die gespecialiseerd is in software die real-time wordt gebruikt. De software constateert waar werk moet worden uitgevoerd en de chauffeurs worden met een andere applicatie hierop geattendeerd. Ook wordt er direct

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 »

Junior Software Developer (HBO / WO)

Functie omschrijving Voor een leuke opdrachtgever zijn wij op zoek naar een Junior Software Developer! 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? Dan hebben wij bij Jelling IT Professionals de perfecte opdrachtgever in de omgeving van Hoofddorp. Binnen deze functie vervul je een onsite learning programma waarbij je aan de slag gaat met PHP en Laravel. Hierbij ben je voornamelijk werkzaam op verschillende klantlocaties en is het jouw taak om hun wensen en eisen

Bekijk vacature »

.NET developer

Functie Jij begint als .NET ontwikkelaar in een team met 10 andere Software Engineers. De werkzaamheden zijn afwisselend, zo kan het dat jij bezig bent met volledig nieuwe features of het door ontwikkelen van bestaande sites of shops. Wij ontwikkelen web applicaties, maar ook mobiele applicaties. Daarnaast bijt jij je soms ook van in externe koppelingen met systemen zoals een ERP. Als team is er een duidelijke focus m.b.t. het waarborgen van de performance en snelheid van webshops. Ook zijn wij expert op het gebied van configuratoren. Kortom enorm veel afwisselende werkzaamheden! Ook jouw werkplek kan afwisselend zijn. Soms heb

Bekijk vacature »

Software developer

Werkzaamheden voor jou als software developer Voor een goede relatie in de regio Zwolle (meerdere locaties) zoeken wij een software developer die betrokken is bij de ontwikkelcyclus en verantwoordelijk is voor het testen en keuren van nieuwe en geoptimaliseerde software. In deze functie ben je in de implementatiefase de persoon die risico's beoordeelt en intern oplossingen aanbrengt om risico's te verkleinen. Binnen het ontwikkelteam van de software ben je een belangrijke schakel waar je intensief meewerkt met scrum. Het voorkomen van bugs in de programma's en het bevorderen van gebruiksvriendelijkheid voor eindklanten zijn voor jou een uitdaging en geeft voldoening

Bekijk vacature »

Junior Front end developer

Functie Jij als developer gaat ons helpen onze producten verder te ontwikkelen en in te zetten in de markt. Op dit moment bestaat ons SaaS product uit 3 componenten die zowel los als in een pakket gekocht kunnen worden. Het gaat hier om een online kaartapplicatie, een workflow tool en een monitoring tool. Momenteel zijn wij 3 jaar geleden gestart met de ontwikkeling. De tech-stack waarmee we werken is voornamelijk Javascript, Vue.js en Python. Daarnaast gebruiken wij FaundaDB als database en werken we veel met GIS applicaties. De uitdaging die we momenteel hebben is dat we momenteel een intern team

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

Ontwikkelaar Centrale Monitoring

Ontwikkelaar centrale Monitoring Functieomschrijving Wil jij een bijdrage leveren aan het onderhoud, opzetten en ontwikkelingen van technologieën van SSC-ICT, een van de grootste ICT-dienstverleners van en voor de Rijksoverheid? Je komt als monitorspecialist te werken bij team Operations Management Services. Dit team werkt aan het stabiliseren en waarborgen van een betrouwbare monitoromgeving voor 7 ministeries. Jij begeleidt het implementatieproces van de te monitoren technologieën, onder andere via management packs, connectoren en API's. Je hebt hiervoor veel contact met interne en externe klanten, die hun wensen op het gebied van monitoring aan jou doorgeven. Je beoordeelt deze wensen en komt met

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 »
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/04/2024 03:05:24
 
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.