Audioplayer

Overzicht

Sponsored by: Vacatures door Monsterboard

Front-end developer E-Commere

Functie E-commerce is een ‘’snelle’’ wereld. Om hierin continu voorop te blijven omarmen ze in een vroeg stadium nieuwe technieken. Een webshop is nooit af en kan altijd beter, sneller en efficiënter. Tegelijkertijd hebben ze vanaf hun oprichting altijd vastgehouden aan kwaliteit boven snelheid, en dit loont. Als front-end developer heb je een adviserende rol en sta je aan het eindpunt van alles wat met designs te maken heeft. Je overlegt met klanten en collega’s, en zet je in om ideeen om te zetten tot unieke concepten. Je bent het aanspreekpunt voor de klant en bewaakt tevens de planning. Eisen

Bekijk vacature »

Junior .NET developer

Functie Ons programma is voor afgestudeerde enthousiastelingen die het als een uitdaging zien om met een klein dynamisch team bij de grootste bedrijven van Nederland aan de slag te gaan. Tijdens jouw dienstverband word jij begeleid door een talent manager. Het ontwikkelen van jouw talent staat hierbij centraal. Het programma doorloop je met een team van circa 8 Mede- trainees. De eerste maand start je met een fulltime inhouse opleiding. Deze staat geheel in het teken van de werkzaamheden die jij verder in het programma zult uitvoeren. Na deze opleidingsmaand ga je aan de slag in een dynamische omgeving bij

Bekijk vacature »

Low Code Ontwikkelaar

In het kort Als Low Code Developer werk je aan projecten bij en voor onze klanten, waarbij je voor het ontwikkelen van de oplossingen een technisch low-code platform gebruikt. Samen met het team streef je naar de beste oplossing en bepalen jullie de juiste aanpak. Je rol is divers en je bent van begin tot eind betrokken bij de ontwikkeling zowel de back-end en de front-end van de applicatie. Naast de ontwikkeling en oplevering, breng je ook advies uit aan de klant waarom bepaalde keuzes worden gemaakt. Je bent dan ook communicatief sterk en kunt je keuzes goed (inhoudelijk) onderbouwen.

Bekijk vacature »

Developer Full Stack

Functie omschrijving Developer gezocht! Ben jij een enthousiaste developer die graag wil bijdragen aan ontwikkelingen binnen een mooie organisatie? Solliciteer dan snel. Wij zijn op zoek naar een Full Stack Developer uit de regio Nijkerk die gaat bijdragen aan het door ontwikkelen, onderhouden en optimaliseren van een SaaS applicatie. Je moet beschikken over beheersing van zowel de Nederlandse als Engelse taal aangezien je samen met de klant gaat werken. Bedrijfsprofiel Je komt te werken binnen een echt familiebedrijf dat al sinds 1925 actief is binnen de FMCG branche. Het bedrijf heeft 40 medewerkers en er heerst een platte communicatiestructuur waarbij

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 »

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

Senior Java Developer

Als Senior Java Developer bij Sogeti ben je onderdeel van onze toonaangevende community die bestaat uit ruim 100 gepassioneerde Java professionals. In teamverband lever je mooie prestaties. Daarmee draag je aan bij de meerwaarde die wij leveren aan onze top-opdrachtgevers. Geen werkdag is hetzelfde! Je bent voortdurend bezig met het oplossen van allerlei complexe vraagstukken binnen bedrijfs kritische systemen voor onze klanten in regio Noordoost zoals DUO, ING, CJIB en Tendernet. Natuurlijk krijg jij de mogelijkheid je verder te certificeren in dit vakgebied. We organiseren regelmatig technische Meetups en doen veel aan kennisdeling. Sogetisten hebben plezier in hun werk en

Bekijk vacature »

Front-end Developer

Onze klant is sinds 2 jaar actief als adviseur en bemiddelaar in de verzekeringsmarkt. Sindsdien proberen zij deze slapende markt flink wakker te schudden. Dit willen zij doen door het bouwen van slimme vergelijkers op hun eigen website en die van partners. Het bedrijf wil continu voorop lopen, zodat consumenten eenvoudig de verzekeringen kunnen vinden die het beste bij ze past. Functieomschrijving Als Front-end Developer werk je aan vergelijkingsmodules die consumenten dagelijks gebruiken bij het vergelijken en afsluiten van verzekeringen. Je vindt het leuk om samen te werken met de product owner, bestaande modules te verbeteren en nieuwe vergelijkers "from

Bekijk vacature »

Java developer (remote)

Functie Wat ga je doen als Java Developer? Jij als Java ontwikkelaar komt te werken in 1 van onze SCRUM teams. Momenteel werken er zo’n 30 ontwikkelaars binnen onze organisatie waarbij jij de brug slaat tussen het bouwen van verschillende functionaliteiten binnen onze applicaties en deze vervolgens te integreren in onze centrale hub. Je start je dag om 9 uur met een stand up en dan pak je jouw taken op voor de dag. Hieronder een aantal taken die jij zal uitvoeren: – Het bedenken en uitbouwen van features binnen de verschillende applicaties – Onderhouden van CI/CD pipelines – Bezighouden

Bekijk vacature »

Java Full Stack Developer

Java Full Stack developer What makes Cognizant a unique place to work? The combination of rapid growth and an international and innovative environment! This is creating a lot of opportunities for people like YOU — people with an entrepreneurial spirit who want to make a difference in this world. At Cognizant, together with your colleagues from all around the world, you will collaborate on creating solutions for the world's leading companies and help them become more flexible, more innovative and successful. And this is your chance to be part of the success story: we are looking for a (Senior) Java

Bekijk vacature »

Senior Product Developer

Functieomschrijving Als senior Product Developer ben je verantwoordelijk voor bestaande mobiliteitsproducten en de ontwikkeling van nieuwe mobiliteitsconcepten. Met behulp van diverse klantonderzoeken, klantsessies en salesmeetings zorg je ervoor dat je de veranderende mobiliteitsbehoeften in de markt kent. Hier speel je op in door innovatieve, flexibele, efficiënte en duurzame vervoersoplossingen te bedenken, te ontwikkelen, te implementeren en uiteindelijk samen met Sales en Marketing collega’s in de markt te zetten. Je initieert en neemt deel aan (internationale en afdeling overschrijdende) projecten, vaak in de rol van projectleider. In die rol bewaak je de voortgang, coördineer je de activiteiten en zorg je voor

Bekijk vacature »

Lead Java Developer

Dit ga je doen Je taken bestaan onder andere uit: Het aansturen van een development team bestaande uit 8 collega's op technisch maar ook HR gebied; Het maken van strategische keuzes omtrent de (nieuw)bouw van deze applicatie; Het maken van technische ontwerpen; Hands-on mee ontwikkelen met het team (met o.a. Java, Spring, Angular, REST); Reviewen van code en feedback geven op collega developers. Hier ga je werken Als Lead Software Developer ben je verantwoordelijk voor één van de vier Agile Java ontwikkelteams die bouwen aan technologie die duizenden instanties wereldwijd verbindt. Dit Agile team, data Jira en Confluence gebruikt en

Bekijk vacature »

.NET developer WO niveau voor predictive software

Bedrijfsomschrijving Dit bedrijf uit Den Bosch is om precies te zijn 15 medewerkers groot en ze ontwikkelen (predicitve) planning software. Dit doen zij voor allerlei mooie en bekende organisaties (bierbrouwerijen, gemeentes, oliemaatschappijen en diverse multinationals). Wegens meer en grotere vraag vanuit de klanten komen er nu posities vrij voor onder andere een .NET developer. Het bedrijf is goed met openbaar vervoer te bereiken. Functieomschrijving Je komt hier te werken in een team van 3 .NET developers en bent betrokken bij het gehele ontwikkelproces. Dus van idee naar ontwerp en van ontwikkeling tot testen en implementatie. Bij voorkeur ben je niet

Bekijk vacature »

.Net Front-end Ontwikkelaar

Wij zoeken een .Net Front-end Ontwikkelaar! Omschrijving Kun jij snel schakelen en ben je stressbestendig? Dan zoeken wij jou! Als .Net Front-end Ontwikkelaar help je mee aan de webapplicatie die over de hele wereld door allerlei bedrijven wordt gebruikt. Je werkt daarnaast mee aan nieuwe en verbeterde functionaliteiten en helpt met het oplossen van bugs. Over de opdrachtgever Je komt te werken in een ambitieus team dat zich blijft ontwikkelen. Dit is alle informatie die we nu kunnen delen over de werkplek. Als jij de .Net Front-end Ontwikkelaar bent voor deze job, vertellen we je snel nóg meer. Eisen Heb

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

G P

15/04/2023 02:35:55
Anchor link
Hallo,

ik ben even bezig geweest om het geheugen nog eens te gebruiken, niet altijd even gemakkelijk.
Hierbij laat ik jullie mijn nieuwe Audio Player eens bewonderen.

Wat kan je verwachten ?

1. Een overzicht van het liedje dat op het moment aan het spelen is.
2. Het overzicht verbergen / tonen

3. Zoeken naar een positie van het liedje
4. Terug gaan naar het vorige liedje
5. Afspelen / pauze van het liedje
6. Het liedje stoppen
7. Naar het volgend liedje

8. Automatisch afspelen aan / uit
9. Willekeurig afspelen aan / uit

10. Mute (stilte) aan / uit
11. Het volume regelen

12. (Nieuw in deze versie) Een afspeellijst
13. De afspeellijst verbergen / tonen

Bijzonderheden:
14. Volledig toegankelijk met de tab-toets
15. Ook streamings kunnen in de playlist

De broncode:
Klik op toon broncode in je browser, het is puur html

De css-file:
CSS bekijken

Javascript:
Javascript bezichtigen

En dan nu ook even de link: Audio Player 3.6

Wat wil ik verwachten ?

1. Eerlijkheid
2. Ideeën
3. Bugs / fouten

Wat nog belangrijk is...
Ik heb het zelf al getest met Google Chrome op PC
Laptop / Mobieltje / Tablet en andere browsers heb ik nog niet getest. Dus als jullie dat even doen en een ander resultaat moest te zien krijgen dan bedoeld, laat het mij dan zeker weten.

Ik hoop dat jullie toch wel tevreden gaan zijn met het resultaat.
G.P. (Günther Peeters alias Elvium)
Gewijzigd op 16/04/2023 04:05:52 door G P
 
PHP hulp

PHP hulp

21/06/2024 20:00:53
 
Jan Koehoorn

Jan Koehoorn

15/04/2023 10:00:14
Anchor link
Het is een vrij uitgebreid script, dus ik beperk me tot een paar algemene opmerkingen:

1. Al je vars bovenin het script zijn nu global. Het is netter om de scope niet groter dan nodig te maken, bijvoorbeeld zo:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
document.addEventListener('DOMContentLoaded', () => {
    // your entire script here
});

let ook op het verschil tussen "var" en "let". Om allerlei redenen heeft "let" meestal de voorkeur (moet je even op googlen)

2. Je gebruikt document.getElementByID en document.getElementsByTagname nogal eens dubbel voor dezelfde elementen. Het is efficiënter om dat bovenin je script in variabelen te stoppen (meestal met const), zodat je het maar 1 keer hoeft te doen. Mijn gewoonte (maar dat is persoonlijke voorkeur) is om const variabelen met hoofdletters te schrijven, zodat ik weet van welk type ze zijn:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
const INPUT_EMAIL = document.querySelector('.email');
const HREFS_CANCEL = document.querySelectorAll('.cancel');


3. In je HTML koppel je de JavaScript functions rechtstreeks aan de elementen, bijvoorbeeld zo:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
<button class="blackGradient" id="audioMute" onclick="javascript:muteSong();" title="Mute" type="button" value="Mute">?</button>

Het is netter om dat met addEventListener te doen, dan maak je het mogelijk om meerdere eventListeners per HTML element te hebben. (Bijvoorbeeld als je dit live zou zetten en je wilt dingen kunnen monitoren met Google Tag Manager)
 
G P

G P

15/04/2023 10:50:44
Anchor link
Bedankt Jan, in JavaScript ben ik een echte n00b. Maar ik zal mij eens meer verdiepen in JS en zeker iets gaan doen met jouw tips.

1. De getElementByID gebruik ik om de standaard zaken uit te lezen / schrijven. (De knoppen / volume slider)
2. De getElementsByTagname om de hele playlist uit te lezen omdat ik niet op voorhand weet hoeveel liedjes er in de playlist zullen staan.
Maar ik zal zeker eens jouw tip gaan gebruiken, het lijkt mij toch veel simpeler zoals je het zegt.
Met de addEventListener en querySelectorAll zal ik eens experimenteren mits ik van JS maar 0.001% kennis van heb. Ik ben al blij dat ik zover geraakt ben.
Eerst nog uitpluizen hoe ik die "positie" van het liedje kan uitwerken.
 
Jan Koehoorn

Jan Koehoorn

15/04/2023 11:00:36
Anchor link
Wat bedoel je precies met de positie? Dat je die slider bovenin kunt verslepen en dat de song dan verder speelt vanaf die nieuwe positie?
 
Jan R

Jan R

15/04/2023 11:07:41
Anchor link
Nog een paar opmerkingen
Verouderd doctype
mp3 kunnen gedownload worden via de src code. De files zijn beschermd. baf/brein
Code eens een keer door de validator sturen. https://validator.w3.org

Jan
Gewijzigd op 15/04/2023 11:18:00 door Jan R
 
- Ariën  -
Beheerder

- Ariën -

15/04/2023 12:00:30
Anchor link
Mijn advies: Gebruik rechtenvrije muziek voor het voorbeeld.
 
G P

G P

15/04/2023 16:28:38
Anchor link
@Jan Koehoorn: Dat is inderdaad wat ik bedoel
@Jan R: doctype is aangepast, hierbij is ook de style en de plaatsing van de elements aangepast. Ik heb het door de validator gehaald. Enige probleem zijn de icons in de knoppen (Icomoon, niet zo'n groot probleem)
@Ariën: De muziek is aangepast, zijn allen rechtvrij en staan ook op de website zelf en niet meer gelinkt naar een andere. Behalve de streaming natuurlijk :)

Bedankt allen voor jullie ideeën.
 
Jan Koehoorn

Jan Koehoorn

15/04/2023 21:45:02
Anchor link
G P op 15/04/2023 16:28:38:
@Jan Koehoorn: Dat is inderdaad wat ik bedoel


Ok. Je kunt een audiobestand starten vanaf een bepaalde positie door de property currentTime van het audio element in te stellen:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html>
    <head>
        <title>PHPHulp</title>
    </head>
    <body>
        <button class="play-25">25%</button>
        <button class="play-50">50%</button>
        <button class="play-75">75%</button>

        <script>
            document.addEventListener('DOMContentLoaded', () => {
                const EL_AUDIO = new Audio('jouw-audio-file.mp3');
                const BTN_25 = document.querySelector('.play-25');
                const BTN_50 = document.querySelector('.play-50');
                const BTN_75 = document.querySelector('.play-75');

                BTN_25.addEventListener('click', () => {
                    EL_AUDIO.pause();
                    EL_AUDIO.currentTime = EL_AUDIO.duration / 4;
                    EL_AUDIO.play();
                });
                BTN_50.addEventListener('click', () => {
                    EL_AUDIO.pause();
                    EL_AUDIO.currentTime = EL_AUDIO.duration / 2;
                    EL_AUDIO.play();
                });
                BTN_75.addEventListener('click', () => {
                    EL_AUDIO.pause();
                    EL_AUDIO.currentTime = ( EL_AUDIO.duration / 4 ) * 3;
                    EL_AUDIO.play();
                });
                EL_AUDIO.addEventListener('loadeddata', () => {
                    console.log('audio element loaded');
                });
            });
        </script>
    </body>
</html>
 
G P

G P

16/04/2023 01:08:55
Anchor link
Hartelijk bedankt !!
Je geeft al meteen een mooi voorbeeld voor het gebruik van een addEventListener !
Super van jou :)
 
Jan Koehoorn

Jan Koehoorn

16/04/2023 08:23:15
Anchor link
Graag gedaan :-)
 
- Ariën  -
Beheerder

- Ariën -

30/10/2023 06:17:41
Anchor link
.
 
 

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.