![]() ![]() This was tested on a 360 px width device. I tested the player on a local version on the website and was unable to make player fit in one line without reducing the volume bar to a not so pleasing width, (please see attached image). ![]() I tried using emojis but found that some icons vary too much in style. To remove the dependency of the material icons we could extract the SVGs from the library. I personally quite like the skip and forward buttons when listening to a podcast but I understand that you are most concerned in preventing the needing for warping when the site is viewed on a mobile device. I'm also open to accepting PRs on a new audio player or even seeing JSFiddles of potential implementations.Īlready implemented the changes you have requested and added support for touch devices. What does everyone think about the above? Do you have a favorite audio player design that you want to show as a reference? What about player feature requests? Basically it would allow for users to listen to an episode but then skim through other podcast episodes or interviews while listening uninterrupted. ![]() The site is using Turbolinks so it would be pretty easy to pull that off. Perhaps with extra spacing that could all work in the end.īut doing this has 1 interesting benefit of maybe having a persistent player across page views. There is 1 button I didn't include due to lack of space and the download button could get a "Download" label to make it wider. That would give quite a bit more horizontal room, but the challenge there is balancing it out with the subscribe buttons. It's worth bringing that up because maybe down the line it would be interesting to place the player and subscribe buttons above the right pane and make it full width across the side bar and right pane. This is working out ok for now, but it's worth mentioning this because the maximum width of the player is only about 680 pixels so we don't have a ton of space to work with. Right now the player loads inside of the right pane, which can be seen here: You just grab a reference to a selector and call a specific audio player function. The JavaScript to implement most of these features is pretty straight forward. The page currently uses jQuery so I would like to stick with that. This would also require adjusting the player to read the time in from an optional query string such as #t=13:37. Nice to have features but aren't essential for day 1:Ī little icon to copy the current time to the clipboard to make it easier to share specific times. It should be flawless when it comes to responsiveness on multiple devices.The volume can be adjusted with a slider or another intuitive UI pattern.Playback speed can be set with a click toggle or drop down from 0.75x to 2.5x in 0.25 increments.A horizontal progress bar that fills up based on time and is clickable to skip around.Displays the current time of the track along with the total length in seconds (ex.A play button that toggles with a pause button.It should display the following information and have this behavior: We pretty much have full reign on how the player could look and act. Ideas for creating a custom audio player: It looks ok in IE11, Edge, Chrome and FireFox. The player looks different in every browser That's ok because I have a dedicated download button, but still, it's not a good idea to be at the mercy of a browser's default player for this. icon that expands to let you download the file while other browsers do not. The player has slightly different features in every browserįor example Chrome has a. This creates a poor listening experience because now you would need to download the file and play it back at 1.5x locally. I personally listen to most podcasts at 1.5x or 2.0x and none of the browser default players support adjusting the playback speed. There's no visible controls to adjust the playback speed The default audio player has a few problems: Your browser does not support the audio element. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |