HTML has a built-in native audio player interface that we get simply using the Show But even with all that… the rendered audio player itself can look a little, you know, plain. Did you know it’s possible to create a custom audio player? Of course we can! While the default  We’re going to take stab at making our own player in this post. So, put on your headphones, crank up some music, and let’s get to work! The elements of an audio playerFirst, let’s examine the default HTML audio players that some of the popular browsers provide. If our goal is to match the functionality of these examples, then we need to make sure our player has:
Let’s say this is the design we’re aiming for: We’re not going for anything too fancy here: just a proof of concept sorta thing that we can use to demonstrate how to make something different than what default HTML provides. Basic markup, styling and scripts for each elementWe should first go through the semantic HTML elements of the player before we start building features and styling things. We have plenty of elements to work with here based on the elements we just listed above. Play/pause buttonI think the HTML element appropriate for this button is the Something like this in the markup: So, the question becomes: how do we swap between the two buttons, both visually and functionally? the pause icon will replace the play icon when the play action is triggered. The play button should display when the audio is paused and the pause button should display when the audio is playing. Of course, a little animation could take place as the icon transitions from the play to pause. What would help us accomplish that is Lottie, a library that renders Adobe After Effects animations natively. We don’t have to create the animation on After Effects though. The animated icon we’re going to use is provided for free by Icons8. New to Lottie? I wrote up a thorough overview that covers how it works. In the meantime, permit me to describe the following Pen: CodePen Embed Fallback The HTML section contains the following:
The CSS section includes some light styling. The JavaScript is what we need to break down a bit because it’s doing several things: Here’s what the script is doing, minus the code:
Current time and durationThe current time is like a progress indicate that shows you how much time has elapsed from the start of the audio file. The duration? That’s just how long the sound file is. A Seek slider and volume control sliderWe need a way to move to any point in time in the sound file. So, if I want to skip ahead to the halfway point of the file, I can simply click and drag a slider to that spot in the timeline. We also need a way to control the sound volume. That, too, can be some sort of click-and-drag slider thingy. I would say Styling range inputs with CSS is totally possible, but I’ll tell you what: it is difficult for me to wrap my head around. This article will help. Mad respect to you, Ana. Handling browser support with all of those vendor prefixes is a CSS trick in and of itself. Look at all the code needed on Whoa! What does even mean, right? Styling the progress section of range inputs is a tricky endeavor. Firefox provides the One of the native HTML Volume percentageThis is to display the percentage volume. The text content of this element is updated as the user changes the volume through the slider. Since it is based on user input, I think this element should be the Mute buttonLike for the play and pause actions, this should be in a That’s all of the basic markup, styling and scripting we need at the moment! CodePen Embed Fallback Working on the functionalityThe HTML
An empty string is equivalent to the What would help us accomplish the features our audio player should have is the JavaScript First off, we should create an Display the audio durationThe first thing we want to display on the browser is the duration of the audio, when it is available. The We’ve set That’s great but, again, we get the duration in second. We probably should convert that to a We’re using The third variable, More often than not, the browser loads the audio faster than usual. When this happens, the
We want to focus on the metadata. So our approach is to display the duration if the metadata of the audio is available. If it is not available, we add the event listener. That way, the duration is always displayed. Seek sliderThe default value of the range slider’s Notwithstanding, if the audio duration is 150 seconds and the value of the slider’s Buffered amountAs the browser downloads the audio, it would be nice for the user to know how much of it they can seek to without delay. The Recall that the When the audio has started playing, the It returns multiple chunks of media because, more often than not, byte-range requests are enabled on the server. What this means is that multiple parts of the media can be downloaded simultaneously. However, we want to display the buffered amount closest to the current playback position. That would be the first chunk (time range 0 to 20). That would be the first and last chunk from the first image. As the audio starts playing, the browser begins to download more chunks. We would want to display the one closest to the current playback position, which would be the current last chunk returned by the buffered property. The following snippet would store in the variable, This would be 20 from the 0 to 20 range in the first image. The following snippet stores in the variable, Nevertheless, this would be 100 from the 90 to 100 range in the second image, which is the entire audio duration. Note that there are some holes in the As the browser downloads the audio, the user should expect that the buffered amount on the slider increases in width. The Finally, we should actually display the buffered amount on the seek slider. We do that by setting the property we talked about earlier, CodePen Embed Fallback Current timeAs the user slides the thumb along the range input, the range value should be reflected in the If you think the correct event to listen to should be the change event, I beg to differ. Say the user moved the thumb from value 0 to 20. The input event fires at values 1 through to 20. However, the change event will fire only at value 20. If we use the change event, it will not reflect the playback position from values 1 to 19. So, I think the input event is appropriate. Then, in the handler for the event, we pass the slider’s value to the We created the function to take time in seconds and return it in a I added the snippet below to our JavaScript. To see it in action, you can move the seek slider’s thumb back and forth in the following Pen: CodePen Embed Fallback Play/pauseNow we’re going to set the audio to play or pause according to the respective action triggered by the user. If you recall, we created a variable,
We already implemented the second and third actions in the handler for the button’s click event. What we need to do is to add the statements to play and pause the audio in the event handler: It is possible that the user will want to seek to a specific part in the audio. In that case, we set the value of the audio’s Recall our scenario of 1 to 20 values. Now imagine the user slides the thumb from 1 to 20 in, say, two seconds. That’s 20 seconds audio playing in two seconds. It’s like listening to Busta Rhymes on 3× speed. I’d suggest we use the With that out of the way, something needs to be done while the audio is playing. That is to set the slider’s value to the current time of the audio. Or move the slider’s thumb by one tick every second. Since the audio duration and the slider’s However, there are some things to take note of here:
Let’s consider the first issue. To be able to interact with the slider while the audio is playing, we would have to pause the process of updating it’s value when it receives input. Then, when the slider loses focus, we resume the process. But, we don’t have access to this process. My hack would be to use the To use the
This is illustrated in the following snippet: But this doesn’t exactly solve our problem. The process is only paused when the audio is paused. We also need to pause the process, if it is in execution (i.e. if the audio is playing), when the user wants to interact with the slider. Then, after the slider loses focus, if the process was ongoing before (i.e. if the audio was playing), we start the process again. For this, we would use the slider’s input event handler to pause the process. To start the process again, we would use the I was able to come up with something for the second issue. I added the statements in the seek slider’s input event handlers to the Note that the statement on the fourth line is the seek slider’s appropriate statement from the Now we’re left with the volume-control functionality. Whew! But before we begin working on that, here’s a Pen covering all we’ve done so far: CodePen Embed Fallback Volume-controlFor volume-control, we’re utilizing the second slider, The slider’s The Not bad, right? Muting audioNext up is the speaker icon, which is clicked to mute and unmute the audio. To mute the audio, we would use its Full demoHere’s the full demo of our custom audio player in all its glory! CodePen Embed Fallback But before we call it quits, I’d like to introduce something — something that will give our user access to the media playback outside of the browser tab where our custom audio player lives. Permit me to introduce to you, drumroll, please… The Media Session APIBasically, this API lets the user pause, play, and/or perform other media playback actions, but not with our audio player. Depending on the device or the browser, the user initiates these actions through the notification area, media hubs, or any other interface provided by their browser or OS. I have another article just on that for you to get more context on that. The following Pen contains the implementation of the Media Session API: CodePen Embed Fallback If you view this Pen on your mobile, take a sneak peek at the notification area. If you’re on Chrome on your computer, check the media hub. If your smartwatch is paired, I’d suggest you look at it. You could also tell your voice assistant to perform some of the actions on the audio. Ten bucks says it’ll make you smile. 🤓 One more thing…If you need an audio player on a webpage, there’s a high chance that the page contains other stuff. That’s why I think it’s smart to group the audio player and all the code needed for it into a web component. This way, the webpage possesses a form of separation of concerns. I transferred everything we’ve done into a web component and came up with the following: CodePen Embed Fallback Wrapping up, I’d say the possibilities of creating a media player are endless with the What’s the saying? With great power comes great responsibility, right? Think of all the various controls, elements, and edge cases we had to consider for what ultimately amounts to a modest custom audio player. Just goes to show that audio players are more than hitting play and pause. Properly speccing out functional requirements will definitely help plan your code in advance and save you lots of time. |
Cara menggunakan javascript pause while loop
Pos Terkait
Copyright © 2024 apacode Inc.
