Chrome does not display the play button when the width of the audio tag is reduced in HTML 5

I'm looking to implement the HTML 5 audio tag that works on both Chrome and Firefox:

      <audio controls preload="metadata" style=" width:50px;  border-radius: 100px;margin-top: 15px; float: left;">
        <source src="https://s4.uupload.ir/filelink/MeiZSg8dmNUl_a0ba664242/koe_no_katachi_a_silent_voice_-_lit_(feora_remix)_pe7w.mp3" type="audio/mpeg">
        Your browser does not support the audio element.
      </audio>

However, when using Chrome, the play/pause button is missing unlike in Firefox where it shows a timeline. I attempted to remove the timeline with:

audio::-webkit-media-controls-timeline {
    display: none !important;}

The three dots button contains the play, download, and mute buttons. I prefer not to use any JavaScript code for creating a play/pause button, rather sticking to CSS and HTML only. How can I make the play button visible at a lower width like 50px in Chrome, similar to how it displays in Firefox?

htmlcsshtml5-audio

Answer №1

According to MDN, the <audio> element does not have a default visual output unless the controls attribute is specified, in which case the browser's default controls will be displayed.

The default controls are set to display inline by default, but it is recommended to change this to block for better control over positioning and layout, unless you want it integrated within a text block or similar.

You have the ability to style the default controls as a single unit with properties like borders, border-radius, padding, margin, etc. However, customization of individual components within the audio player (such as changing button size or icons, font, etc.) is not possible, and the appearance of controls may vary across different browsers.

To achieve a consistent look and feel across browsers, custom controls can be created, marked up, and styled according to your preferences. JavaScript along with the HTMLMediaElement API can then be used to implement their functionality.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What are some effective methods for drawing attention to newly added table rows?

Whenever I input new data into my table, the data does not get highlighted as expected. However, the existing data in the table gets highlighted with no issues. Can you please help me troubleshoot why my code is not functioning correctly? Thank you. The f ...

javascriptjqueryhtmlcssbootstrap-4

Incorporating ng-animate with the dynamic animations of animate.css

I am currently exploring the functionality of ngAnimate. In order to implement ngAnimate, I have included angular-animate.js, animate.css, and angular 1.3 in my project. To activate ngAnimate, I added it to my app configuration and also included some CSS ...

cssangularjsng-animate

How to ensure an absolutely positioned div spans the entire width of the screen

I am facing an issue with an absolutely positioned div that I want to stretch the full width of the screen using 100vw. However, the problem is that it aligns with its parent's starting point rather than the left side of the viewport. How can I make s ...

htmlcsscss-positionabsolute

How can the hreflang tag be used correctly in a React application that supports multiple languages?

I have a React application with 3 pages(routes) and I support 2 languages (English and Spanish). Should I insert the following code into the <head></head> section of the public\index.html file like this? <link rel="alternate" ...

javascripthtmlreactjsseohreflang

Issue with Bootstrap collapsible menu not expanding when clicked

I want to make my collapsed navbar menu expand when clicked on a small screen. I've customized a Bootstrap navbar to split my links at each end of the bar. Right now, the links collapse when the screen size decreases, but clicking on the accordion but ...

htmlangularmenubootstrap-5

Having trouble with Bootstrap form-inline stacking issue, any tips on how to stop them from stacking?

I've created a simple test navbar with a search input box and search button using the Bootstrap class form-inline. However, the search button is appearing below the search input, even though there is enough space available. You can view the codepen he ...

htmlcssbootstrap-4navbarbootstrap-5

Tips for creating responsive headings in Bootstrap

I've recently been developing a bootstrap website and have encountered an issue with the heading (h1) size on smaller screens. While everything else scales properly, the heading remains fixed and ends up being too large for small screens. How can I ad ...

htmlcsstwitter-bootstraptwitter-bootstrap-4

Calculate the total of additional user inputs and show the result in a separate element using JavaScript

Query Is there a way for an element to dynamically show the total of different inputs? Situation I have multiple text boxes all with the same class. There are 4 input fields, each containing a number - Input 1 is "1", Input 2 is "2", and so on. The goal ...

javascriptjqueryhtmlinput

I'm having trouble loading static files even though I've double-checked all the settings and added the necessary "load static" in the templates. It seems like the static files

https://i.sstatic.net/FO7Uh.pngThe static files are failing to load completely. When inspected on the template network, it shows a 404 not found error. Despite everything in the settings and template appearing correct, the network does not pick up the corr ...

pythonhtmldjangodjango-staticfilesstatic-files

Tips for adjusting the height of the NextJS Image tag based on the width of the screen

I'm leveraging next/image to display my image in the following way: <Image src={imageLink} width="1920" height="512" alt="Hero Image" /> Everything works well for screen widths larger than 750px. Is there ...

cssreactjsnext.jsmedia-queriesnext-images

Unable to resolve issue with Display:flex in my CSS, despite numerous attempts

Here is the structure of my CSS and HTML: #TopBar{ display: flex; justify-content: space-between; z-index: 1; position: fixed; top: 0px; left: 0px; background-color: rgb(25,25,25); height:115px; width: 2000px; } #Logo{ top: 0px; height: 110px ...

javascripthtmlcsswebflexbox

Personalizing Bootstrap 5 button designs and attributes for a customized look

In my project, I've set up my custom.scss file with the following code: $primary: #e84c22; $theme-colors: ( primary: $primary, ); @import "~bootstrap/scss/bootstrap.scss"; Currently, the color looks like this: https://i.sstatic.net/lbL ...

htmlcsstwitter-bootstrapsassbootstrap-5

Having difficulty with collapsing Bootstrap side navigation menu levels

I've been searching high and low for an example that matches my current issue, but so far, no luck. I'm attempting to design a collapsible side navigation with multiple levels in bootstrap using bootstrap.js. The problem I'm facing is that ...

javascriptjqueryhtmlcsstwitter-bootstrap

Connecting an HTML box to a JavaScript function for the desired outcome: How to do it?

My goal is to connect the input box with id="b" (located inside the div with id="but1") with a JavaScript function that calculates values within an array. Although my junior logic review didn't detect any issues in the code, what mistakes could I have ...

javascripthtml

Having difficulty choosing a drop-down menu option with AJAX technology

My current project involves creating a page where the database is updated upon a drag-and-drop event. Specifically, I have implemented drag-and-drop functionality on a page, and whenever a div (deal-card) is dragged and dropped into another div (stage-colu ...

javascripthtmljquerydjangoajax

Issue with Bootstrap carousel not centered on the page

Currently working on a carousel using bootstrap. The goal is to display 5 images at a time and have it advance by 1 slide each time. The main issue I'm facing right now is that the elements are not properly positioned within the container, and the tr ...

jqueryhtmlcsstwitter-bootstrapslider

Display an image file using the <img src=""> tag in PHP

I am facing a small issue and could use some assistance. My goal is to display the ROW image associated with each unique ID in my database. Below is an excerpt from my PHP code: while ($row = $result->fetch_assoc()) { // Display the image ...

phphtml

Creating Sub Menu in Blogger with pageListJSON

I am looking to enhance the menu on my blog by adding a sub-menu structure. Specifically, I want to organize my menu to include "Manual Testing" and "Automated Testing" as sub-menus under the main category of "Testing". Testing Manual Testing Automated ...

htmljsonblogger

Extract time value from html datetimepicker input

Recently, I've been utilizing a datetime_picker that I found on the web to create a value for an html text input. However, I encountered a problem in separating the value into distinct date and time components. When using the date_picker, the TEXT inp ...

phphtml

What are some other options besides HTML Tidy?

Having integrated HTML Tidy into my application to sanitize incoming HTML, I have encountered a plethora of bugs within the Tidy source code. The task of fixing these bugs directly in the source is nothing short of a nightmare, given that the code is an in ...

c++htmlctidyhtmltidy