Audios not playing on IE broswer

Can you determine why my audios are not playing on IE.  Actually, after making the play button visible, I see that it does not display in IE.

It works perfectly in Chrome. 

In FireFox, the button is off-center.

What is the best way to address this issue?

Can you determine why my audios are not playing on IE.  Actually, after making the play button visible, I see that it does not display in IE.

I think you need to right click in the image in order to play in IE. Since it doesn't support Audio Controls by default.

In FireFox, the button is off-center.

I was able to replicate this issue on my Firefox as well.

Let me do further test first.

Could try replacing the current CSS code (.AUDIO) into the CSS code below.

.AUDIO {

    position : absolute;

    margin-top : 16px;

    margin-left : 10px;

    width: 50px;

    z-index : 2;

    opacity : .91;

    transform : scale(1.5);

}

After using that code it looked like this in my Mozilla Firefox.

That looks nice in Firefox.  Since one form will have approx. 150 images with overlying audio players (that will be invisible), right-clicking will be untenable.  I can see telling my users that they can't use IE, but now this is what it looks like previewed in Chrome:

and previewed in Chrome on phone, portrait:

I would rather not tell them they can only use one browser.

Are you referring to the inverted ellipsis button on Chrome?

I believe that is an update to the new Chrome browser. They added a responsive button for the audio tags. Unfortunately, I could not find ways to turn it off due to its limitations.

Anyway, here's my workaround with a different approach. Feel free to try it if you like.

To control the background image and the play button, you have to enclose the audio code with a div tag.

You can use the following. Notice the high and low class in the div element. They are for the high and low background images which you can replace in the CSS codes.

<div class="high">

   <audio class="audio" controls="controls" type="audio/mp3">

   <source src="https://tinnitussynergy.com/wp-content/uploads/2017/12/Killer-Whale-05500.mp3"></source>

                Your browser does not support the audio element.

   </audio>

</div>

<div class="low">

    <audio class="audio" controls="controls" type="audio/mp3">

   <source src="https://tinnitussynergy.com/wp-content/uploads/2017/12/Killer-Whale-05500.mp3"></source>

   Your browser does not support the audio element.

</audio>

</div>

Then inject the following CSS codes to your form.

.high {

    background: url(https://tinnitussynergy.com/wp-content/uploads/2017/12/Icon_Killer-Whale-Low.png) no-repeat;

    height: 78px;

    width: 80px;

    overflow: hidden;

    display: inline-block;

box-sizing: border-box;

}

.low {

background:url('https://tinnitussynergy.com/wp-content/uploads/2017/12/Icon_Killer-Whale-High.png') no-repeat;

    height: 78px;

    width: 80px;

    overflow: hidden;

    display: inline-block;

box-sizing: border-box;

}

.audio{

    width: 71px;

    box-sizing: border-box;

    transform: scale(3);

    opacity: 0.8;

    position: relative;

top: 21px;

left: 60px;

}

_:-moz-tree-row(hover), .audio {

left: 0;

}

_:-ms-fullscreen, :root .audio {

    width: 86px;

    box-sizing: border-box;

    transform: 0;

    opacity: 0.8;

    position: relative;

    top: 1px;

    left: 3px;

}

As you can see, I removed the image in the source code. I added it to the CSS code instead so it would at least improve the form performance when loaded in the browser.

In the CSS, I had to increase the scaling to get rid of the vertical ellipsis button. A browser specific CSS for Mozilla and IE is also added for alignment. It should work on IE browser.

Demo: https://form.jotform.com/73492084782970

IE 11

Chrome

Firefox

Hope this helps!

Wow!  Excellent work Elton.  Y'all at JotForm never cease to amaze me at your helpfulness and excellence.

I tried to apply that code on another image and another audio...and reduced the player opacity.  It works perfectly in Chrome, FireFox, AND Chrome.  Yay for team JotForm...and Me.

Is it possible to put my audio in a css variable as well, just like you did with the images.  

We are sooo close, seemingly.

This will save me over a hundred hours and probably lots of errors.

I'm afraid no, you cannot put audio file in CSS as variable, you need HTML for that.

So, if it works, you can download Source code of your form and do the necessary adjustments there: https://www.jotform.com/help/104-How-to-get-the-Full-Source-Code-of-your-Form

If you need any assistance please let us know.

Thank you!

Thanks Nic,

I do believe we understand each other, but just to make sure...

and since y'all have done a beautiful job with the images in css on page 3 of https://www.jotform.com//73486561790164  ...

Is there no way to place the audio, on in the same page 3 location, into a variable or place a variable into the audio url so that its url reference could be altered/replaced in the css? 

If we could, I wouldn't need to to download, alter, and reload the Source code at all. That would be AMAZING.

The "issue" with CSS is that is used only to style the HTML, it cannot do such constructions.

CSS can change styling in terms of colors, position, size, layout in general.

So placing the audio file variable and changing it would be a job for JavaScript.

What I can think of, is to place certain files, as you did, in the form, but the links you use to be some uploads from the online storage you control.

So, if you have an audio file like this:

You could just upload the new audio and keep the same name, so the URL will be the same (but the audio would actually change in the form).

If we are on the same page?

I decided to open a separate thread for this issue here: https://www.jotform.com/answers/1326543.

So we can discuss it better and try to find a solution.

Thank you!

You may want this on a new thread, but I wanted you to see the relevant css above.

To better assist you, we will be answering your question on this new thread: https://www.jotform.com/answers/1341539

Thank you.