Audios not playing on IE broswer

  • Profile Image
    jayhobbs21
    Asked on December 15, 2017 at 07: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?

  • Profile Image
    Marvih
    Answered on December 15, 2017 at 08: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.

    151338878172.gif


    In FireFox, the button is off-center.

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

    151338906174.png

    Let me do further test first.

  • Profile Image
    Marvih
    Answered on December 15, 2017 at 09: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.

    151339010575.png

  • Profile Image
    jayhobbs21
    Answered 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:

    1513398830DELETE.png

    and previewed in Chrome on phone, portrait:

    1513398964DELETE-1.png

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

  • Profile Image
    EltonCris
    Answered on December 16, 2017 at 04: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!

  • Profile Image
    jayhobbs21
    Answered on December 16, 2017 at 06: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.

    1513465216DELETE.png

  • Profile Image
    jayhobbs21
    Answered 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.

  • Profile Image
    Nik_C
    Answered 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!

  • Profile Image
    jayhobbs21
    Answered 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.

  • Profile Image
    Nik_C
    Answered on December 18, 2017 at 02: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:

    1513624257Screen Shot 2017-12-18 at 8.16

    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?



  • Profile Image
    jayhobbs21
    Answered on December 18, 2017 at 03: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.

  • Profile Image
    Nik_C
    Answered on December 18, 2017 at 04: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!

  • Profile Image
    jayhobbs21
    Answered on January 07, 2018 at 06:38 PM

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

    How do I make the images center-align?  I don't HAVE to have that, but it would be nice.

    Also, at a different part of the form, I would like the image-with-audio in-line, at eh  end of a text line.

    https://www.jotform.com//73486561790164 

  • Profile Image
    John_Benson
    Answered on January 07, 2018 at 09:11 PM

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

    Thank you.