This week, I consolidated my previous learnings by creating an audio player using JavaScript and implementing drag-and-drop functionality. Developing the HTML structure felt natural, as it has become second nature to me. I handled most of the styling after completing the JavaScript coding, but I established the basic layout using my `.container` class, which employs `display: flex`, `justify-content: centre`, and `align-items: centre`. I created an audio object and set up an array of song objects, linking functions for play, pause, next, and previous actions to their respective buttons.
I felt accomplished while setting up the audio controls and enjoyed seeing the player come together. However, I encountered some frustration with the drag-and-drop functionality, particularly when it interfered with slider adjustments. Additionally, I struggled to position the title closer to the audio player, which was frustrating despite my attempts with margin and padding adjustments.
The audio control implementation was a success, as all buttons functioned as intended. The sliders for volume and playback worked well, providing smooth user interactions. However, the conflict between drag-and-drop and slider functionality created usability issues. I learned a lot about syncing the display time with the song’s progress, but I found converting time into “MM” format a bit confusing and recognize that I need more practice to fully grasp this concept. Overall, I learned how to create an audio player with various interactive features, including volume controls and song progress indicators, which will be invaluable for future projects involving multimedia elements.
This week’s project highlighted the importance of understanding event handling in JavaScript, particularly when multiple interactive elements are present. While I successfully added keyboard controls based on W3Schools research, I realized that integrating them into the right place in the code could be crucial for functionality. The difficulty with positioning the title reinforced the need for thorough testing and debugging techniques using browser developer tools. I explored adding keyboard navigation controls and styled the slider thumb using W3Schools, which enhances user experience and accessibility, making my projects more inclusive. I can see these skills being useful in future web applications, particularly when aiming for user-friendly designs.
If I were to approach this project again, I would allocate more time to researching event handling for drag-and-drop interactions to prevent conflicts with other components. I’d also start addressing layout issues earlier in the development process, which might save time and reduce frustration. Moving forward, I will explore more about event delegation and conditional event handling to manage the interaction between different components effectively. Additionally, I’ll practice using developer tools to debug layout issues and better understand CSS positioning techniques.
Through my research on accessibility features like keyboard navigation, I’ve gained a deeper appreciation for the need to design web applications that cater to all users. This insight emphasizes the importance of inclusivity in web development, which I plan to prioritize in my future projects. This understanding has strengthened my commitment to creating accessible content, knowing that it improves user experiences for diverse audiences. Overall, I really enjoyed creating this audio player and plan to work with more audio in future projects, as this week’s experience has increased my confidence in creating media-rich web applications.