-
jayhobbs21Asked on December 15, 2017 at 7:26 PM
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?
Page URL: https://www.jotform.com//73486561790164 -
MarvihReplied on December 15, 2017 at 8:51 PM
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.
-
MarvihReplied on December 15, 2017 at 9:10 PM
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.
-
jayhobbs21Replied on December 15, 2017 at 11:39 PM
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.
-
Elton Support Team LeadReplied on December 16, 2017 at 4:01 AM
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!
-
jayhobbs21Replied on December 16, 2017 at 6:08 PM
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.
-
jayhobbs21Replied on December 18, 2017 at 10:19 AM
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.
-
Nik_CReplied on December 18, 2017 at 11:36 AM
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!
-
jayhobbs21Replied on December 18, 2017 at 12:52 PM
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.
-
Nik_CReplied on December 18, 2017 at 2:12 PM
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?
-
jayhobbs21Replied on December 18, 2017 at 3:19 PM
That is a creative option Nik. Thank you for trying and explaining the difficulty.
Unfortunately, the goal is to create about 90 different forms, each with a little different combination of audios.
So, changing the reference is the one thing I am stuck needing to do...with 150 audio references in each form.
-
Nik_CReplied on December 18, 2017 at 4:10 PM
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!
-
jayhobbs21Replied on January 7, 2018 at 6:38 PM
-
John_BensonReplied on January 7, 2018 at 9:11 PM
To better assist you, we will be answering your question on this new thread: https://www.jotform.com/answers/1341539
Thank you.