HTML5 audio player like WhatsApp voice message
€30-250 EUR
Paid on delivery
Your task is to build a wrapper around the HTML5 audio tag with a WhatsApp-like skin. It should look like a voice message you received like in the screenshot shown.
You don't have to reinvent the wheel: Use this open source project for the JavaScript player: [url removed, login to view] and build a skin for it. You can start from one of the existing skins here: [url removed, login to view]
Requirements:
0. Prerequisite: Please see WhatsApp web client for CSS variables/settings/colors/shadows and actual behavior of the audio player.
1. Responsive. Must also work on mobile devices.
-> The width of the player must adjust to the screen size. Max size: 340x80
-> No stacking of elements, you can go with a min-width of 300px. Let the width of the seek bar adjust
2. You can use HTML5 + CSS3
-> No need to support old browsers
-> You can also use a CSS preprocessor like Sass if you want (if you do, put all colors in variables so that I can change them if necessary)
3. Differences to WhatsApp voice message:
a) Make the speech bubble thing in the upper left corner optional. The box can look like a rounded box.
b) Remove the "time received" entirely
c) Add an optional title. Text should be right-aligned. Title should be aligned to the end of the seek bar
4. Differences to other Picobel skins (see screenshots of other skins on Github above):
a) No need for volume control
b) No need for mute button
5. Avatar:
-> Use the attached microphone SVG as a layer above the avatar
-> Define the avatar via CSS as a background-image. This way, I can change the avatar via CSS instead of JS, maybe like so:
.avatar {
background-image: url('[url removed, login to view]')
}
6. Name and optional title:
- You can provide the name and title via HTML5 attributes: <audio data-artist="John Smith" title="This is my title" ...
- But please see the JS code of Picobel if this works. It should though.
7. No need to modify existing JS. Leave Picobel as it is. If something is unclear, contact me :)
Cheers,
Mediawerk
Project ID: #13821917
About the project
Awarded to:
Hi, I have worked with Audio player before but it was with jplayer. I can use the JS you have mention and all the points in the description will be taken care of. Final output will be. Responsive Html, css and j More
18 freelancers are bidding on average €188 for this job
Hi I work towards providing reliable, relevant and robust IT solutions at most competitive prices to my customers. I ensure 100% customer satisfaction so lets start Thanks
I am very expirienced frontend developer with great knowledge of JavaScript, JQuery, AJAX, CSS, Bootstrap. Also i am good with PHP and ASP.NET
Hi, we write code. However, unlike most software companies, we realize that's only part of the job. We don't just write code We develop professional software. This is why our clients choose Intelli atlas. Many compani More
Hi, Can we discuss the project? I am available any time for your query, I have an expert in web developing and Web designing. I would love to have the opportunity to discuss your project with you. I believe More
