Audio playback: Sound refuses to play after a while

  • Profile Image
    jayhobbs21
    Asked on January 07, 2018 at 09:02 PM

    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:12 PM

    Please see image below if that's what you're trying to achieve.

    1515377375435351sx.png

    You want to center the all the images, is that correct? Please let us know so we can provide you a custom CSS code.

    We'll wait for your reply. Thank you.

  • Profile Image
    jayhobbs21
    Answered on January 07, 2018 at 11:33 PM

    Yes, that is correct.

    And putting other images with their overlying tones at the end of a line of text.

  • Profile Image
    Kiran
    Answered on January 08, 2018 at 05:54 AM

    I have checked your JotForm and see that the audio clips are embedded in a Text field. You may center them by including the audio section in a separate div element to align them to center.

    <div style="text-align: center;">

    Existing audio embed code

    </div>

    Please see the screencast below that can help you with this.

    1515408800Peek 2018-01-08 16-20.gif

    You may follow the same procedure for all the audio controls in each Text field.

    Hope this information helps.

  • Profile Image
    jayhobbs21
    Answered on January 08, 2018 at 10:20 AM

    Excellent Kiran.  I am able to reproduce that.

    Now, is it possible to put an image-audio set inline with text, at the end of the text.  I am looking to do that to save page length, since I will have 10 sets of questions per page: "1", "1a, 1b, 1c", "2)" "2a, 2b, 2c", ... .  After each 1), 2), 3)..., I will have an image.

    Here is an example where I would want the image inline, after the "1) "

    1515424637DELETE.png

    It comes from this form:  https://www.jotform.com/73305400184143 

    Thank you.

  • Profile Image
    aubreybourke
    Answered on January 08, 2018 at 11:23 AM

    You could use an ordered list.

    For example:

    1515428606The Easiest Online Form Builde

  • Profile Image
    jayhobbs21
    Answered on January 08, 2018 at 11:50 AM

    That is a good idea Aubrey, but it leaves me with new complications:

    1515430196DELETE.png

    1)  The numbers are no longer in left-aligned with the rest of the questions in the set.

    2) I don't know how to make it display "2." in the next set of questions.

  • Profile Image
    aubreybourke
    Answered on January 08, 2018 at 12:02 PM

    1)  The numbers are no longer in left-aligned with the rest of the questions in the set.

    Please try this:

    <ol style="padding-left: 15px;">

    <li>

    <div class="soundset"><audio class="audio" controls="controls">

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

       </audio></div>

    </li>

    <li>Your second item</li>

    <li>Your third item</li>

    </ol>

    2) I don't know how to make it display "2." in the next set of questions.

    Each occurrence of <li></li> will increment the list item number.

     

  • Profile Image
    jayhobbs21
    Answered on January 08, 2018 at 12:14 PM

    Unfortunately, since I have answers displaying after the solution is chosen, I must have the following question sets in a different text box.

    So, that solution will not work.

    Is there any other way to put an image-audio set inline with text, at the end of the text...without losing the functionality that I described?

  • Profile Image
    aubreybourke
    Answered on January 08, 2018 at 12:22 PM

    You could use one text field to hold your number. Then another to hold your audio button. Then you need to shrink both fields and move the number to a new line.

    For example:

    1515432123The Easiest Online Form Builde

    1515432147The Easiest Online Form Builde

  • Profile Image
    jayhobbs21
    Answered on January 08, 2018 at 01:03 PM

    Great Aubrey.  That works well, and no fancy coding needed.

    1515434561DELETE.png

    Thank you.  I'm good to go.

  • Profile Image
    jayhobbs21
    Answered on January 11, 2018 at 06:41 PM

    Hmm, so I was testing my form and I found that it displays differently live than it does in preview.  When I click the image in preview, it plays the audio as expected, but 'live' in Chrome...

    https://www.jotform.com/73305400184143 

    1515713498DELETE.png

    You may recall that there is css code in the form specifically for each browser.

    IE explorer works well 'live.'

    On the iPhone, the tones do not play.

  • Profile Image
    Marvih
    Answered on January 11, 2018 at 07:45 PM

    Please try adding the code below into your Custom CSS field.

    video::-internal-media-controls-download-button {

        display:none;

    }

    On your iPhone have you tried using a different browser such as Chrome or Firefox?

  • Profile Image
    jayhobbs21
    Answered on January 11, 2018 at 07:58 PM

    That code worked for Chrome.

    I have not tried that on my iPhone.  I really wanted to avoid burdensome extra steps for people to do in order to use the form. 

  • Profile Image
    abrielbebet
    Answered on January 12, 2018 at 01:43 AM

    ok ... very helping

  • Profile Image
    jayhobbs21
    Answered on January 12, 2018 at 11:22 AM

    Is there a better fix for the iPhone browser? 

    That's a pretty big population that needs a workaround.  I really wanted to avoid burdensome extra steps for people to do in order to use the form. 

  • Profile Image
    aubreybourke
    Answered on January 12, 2018 at 11:51 AM

    Somethings not right. Sounds wont play in any device or browser!

    On this form:

    https://www.jotform.com/73305400184143 


  • Profile Image
    aubreybourke
    Answered on January 15, 2018 at 12:41 PM

    I have cleared your form cache. And that seems to have solved it.

    If that still hasn't fixed it for you please try clearing your browser cache as well

  • Profile Image
    aubreybourke
    Answered on January 15, 2018 at 02:23 PM

    For some strange reason every time I clear your form cache it works. But then it stops working again.

    So I will have to escalate this issue to Level 2 support. They will investigate and post a response on this thread.

  • Profile Image
    jayhobbs21
    Answered on January 15, 2018 at 02:31 PM

    Thanks Aubrey, although it did not work for me.

    Does it work on your iPhone?  That's the issue I'm hoping to get to address without a user workaround.

    And thank you for YOUR RECHECKING.   I appreciate the extra attention to insuring a good resolution....and now the escalation.

  • Profile Image
    EltonCris
    Answered on January 15, 2018 at 04:13 PM

    It seems to be a problem with the CSS when viewed on mobile. The transform property distorts the audio button on mobile, so try to inject this CSS codes in your form and check it on iPhone. You should be able to see the play button and it should play the audio too.

    @media screen and (max-width:480px){

    .audio {

        transform: none;

        opacity: 0.4;

        top: 16px;

        left: 0;

    }}

    Result:

  • Profile Image
    jayhobbs21
    Answered on January 17, 2018 at 10:52 AM

    It worked once for me, but then it stopped working.

    I did make 2 changes that I reversed:  "Question spacing" and "Horizontal Padding."  Decreasing the padding gave me the desired spacing effect.  I put everything back where it was, but the play button is not visible nor does touching the image result in any sound on my iphone.

  • Profile Image
    Marvih
    Answered on January 17, 2018 at 11:25 AM

    We had some issues with our Form Cache's yesterday but it was fixed already. I have cleared your form cache as well. Could you please try again if it's working ?

    It was working on my end after clearing your form's cache. In mobile mode too.

  • Profile Image
    jayhobbs21
    Answered on January 17, 2018 at 12:26 PM

    I am having the same issue.  There is no problem on the PREVIEW.

    It is not working on either Chrome or iPhone in LIVE version, where I click on a sent link.

  • Profile Image
    Mike
    Answered on January 17, 2018 at 01:03 PM

    To make sure that we are on the same page. What link do you use when the playback is not working?

  • Profile Image
    aubreybourke
    Answered on January 17, 2018 at 02:13 PM

    I will reopen the support ticket for this thread. The Level 2 team will investigate and post a response on this thread.

  • Profile Image
    EltonCris
    Answered on January 18, 2018 at 04:30 PM

    @jayhobbs21

    I was also able to reproduce the problem. It seems the button switches to its responsive layout like I've previously mentioned in your other threads. It is due to its small width container.

    Find this in the injected CSS codes .audio then update the width from 71px to 75px. See if this helps.

    .audio {

        width: 75px;

        box-sizing: border-box;

        transform: scale(3);

        opacity: 0.1;

        position: relative;

        top: 21px;

        left: 60px;

    }

    This worked well for me.

  • Profile Image
    jayhobbs21
    Answered on January 18, 2018 at 05:07 PM

    I changed 71px to 75px in the .audio css and saved.

    Everything works the same for me:   

     - great on 'Preview'

     - in 'Live' view,  no sound nor image on iPhone

     - in 'Live' view, SELECT results in "Play" and "Download" options in Chrome

  • Profile Image
    Marvih
    Answered on January 18, 2018 at 05:34 PM

    Still can't figure this out. will need to do further testing.

  • Profile Image
    Marvih
    Answered on January 18, 2018 at 06:09 PM

    I cloned your form https://www.jotform.com/73305400184143 and added the CSS code below.

    audio::-internal-media-controls-download-button {

        display:none;

    }

    audio::-webkit-media-controls-enclosure {

        overflow:hidden;

    }

    audio::-webkit-media-controls-panel {

        width: calc(100% + 30px);

    }

    Here is the cloned form https://form.jotform.com/80177265044960 does it work on your end ?If yes, can you please try adding the code on your form ?

  • Profile Image
    jayhobbs21
    Answered on January 18, 2018 at 06:40 PM

    Hmmm, That cloned form works identically...same errors, on my end.  That's peculiar.

  • Profile Image
    Kiran
    Answered on January 18, 2018 at 11:46 PM

    The thread seems to be longer and please allow me a sometime to check the issue and get back to you. I also notice that the thread has already been forwarded to our backend team for further investigation.

    Thanks!

  • Profile Image
    jayhobbs21
    Answered on January 21, 2018 at 10:15 PM

    Is Level 2 still working on a solution?

  • Profile Image
    Ardian_L
    Answered on January 22, 2018 at 06:33 AM

    Yes, I just left a comment for the developer that is assigned to the thread. You will be notified on this thread soon.

  • Profile Image
    jayhobbs21
    Answered on January 26, 2018 at 10:59 AM

    No change in function since January 11.  I  am growing worried that this is broken or just can't be done in JotForm.

    I have people that are paying customers waiting for this, and I have much work to do in reproducing and slightly modifying the form, but only after I know it is functional.  As you can imagine, the 321 conditions I set up were rather time-consuming already.

  • Profile Image
    aubreybourke
    Answered on January 26, 2018 at 12:18 PM

    You have been assigned a developer. And they have marked this thread as important. They will post a response as soon as they can.

    We apologize for the delay. Sometimes these matters are resolved in a matter of days. In other cases it can take weeks.

  • Profile Image
    jayhobbs21
    Answered on January 26, 2018 at 12:22 PM

    Thank you for the update.

  • Profile Image
    EltonCris
    Answered on January 27, 2018 at 09:42 AM

    @jayhobbs21

    Can you check if this cloned version works on your end https://form.jotform.com/80261168489969?

    I believe this isn't a problem with JotForm. It has probably something to do with your custom CSS codes or a bug with the html5 audio player. The strange thing is that every time I opened your form, the audio control turns into a toggle list items (its responsive layout). However, whenever I start changing the width of the audio tag even changing it back, the audio controls switches to its default layout from its responsive layout.

    Example:

    Please let us know if the above form doesn't make any difference. Thanks

  • Profile Image
    jayhobbs21
    Answered on January 27, 2018 at 10:59 AM

    It seems to work fine live in Chrome.

    I pulled that up on my iPhone.  It does not play or play any controls.

  • Profile Image
    EltonCris
    Answered on January 27, 2018 at 11:01 AM

    Glad to know it worked on Chrome now.

    We will probe it further on mobile.

  • Profile Image
    jayhobbs21
    Answered on January 27, 2018 at 05:21 PM

    Thank you for the update Elton.  Knowing what is going wrong and how to avoid it gives me confidence to move forward. 

    I hope not to be forced to give iPhone users a workaround or exclusion, but at least I know that I can provide a predictable service now.

  • Profile Image
    EltonCris
    Answered on January 27, 2018 at 09:34 PM

    Can you try it again on your iPhone?

    https://form.jotform.com/80261168489969

    If it works, feel free to clone the form. If not, please let us know what iPhone device you're using and its iOS version so we can check.

    Note: Some iPhones may not perfectly center aligned the play button (common cross-browser compatibility issues), but as long as its there, it should be able to play the audio when you click it.

  • Profile Image
    jayhobbs21
    Answered on January 27, 2018 at 09:51 PM

    That works nicely Elton.

    1517107484Image-1 (1).jpg

    I can certainly live with that.  There a few things I still hope for:

    1)  I have done about 1 1/2 hours of work on adding form calculations.  Can I add this functionality to the last version you made that I cloned?

    2) For the player to be invisible, but that is only possible if the play button is centered. If I shrink my original images, would I expect the player to fit better?

    3) You see how the image player moves to the next line from the number.  That doubles the screen scrolling the user must do.  Is it possible to get them on the same line?  Perhaps making the original smaller for that too?

  • Profile Image
    EltonCris
    Answered on January 27, 2018 at 11:21 PM

    Great!

    1. I only added a few CSS in the form and made small adjustments in the existing CSS without touching any of the fields. To make it easier for you, I copied the entire CSS codes of the form here https://pastebin.com/raw/SHd82cKB. Copy it then replace the entire CSS codes in your form.

    2. I don't think that'd help since it's a cross-browser compatibility issue. Ex. the current code will center aligned the player on some iPhone devices with a lower version of safari browsers but it may not be to some new safari browsers. Technically, there are ways to target specific devices and browsers using CSS codes but it may affect the consistency of the player.

    Anyway, try to adjust the position of the play button by changing the top and left value. Find this in the CSS codes and update them with the suggested value.

    @media screen and (max-width:480px){

    .audio {

        transform: none;

        opacity: 0.6;

        top: 14px;    /*<--try 20px*/

        left: 0;         /*<-- try 8px */

    }

    audio::-webkit-media-controls-play-button {

        padding: 0 40px;

    }

    }


    3. Inject this CSS codes to align them side by side on mobile.

    @media screen and (max-width:480px){

    [data-type="control_text"].form-col-1{width: 10%;}

    [data-type="control_text"].form-col-2 {width: 50%;}

    }

    Result:

  • Profile Image
    jayhobbs21
    Answered on January 28, 2018 at 01:32 AM

    Thank you Elton.  That works great on Chrome and my iPhone.  I think I will just leave the opacity on low so that if it is slightly displaced on some browser, the user can still see where it needs to be selected.

    I may have a problem.  I tried it on an android and the player displays as a gray bar, but no buttons of any kind.

    The version with the css I added and your cloned version seem to act identically in this respect.

    I'm sorry for the trouble.  I believe you have given me more support than I have paid for.  I just need this to work.

    Thank you.

  • Profile Image
    EltonCris
    Answered on January 28, 2018 at 05:44 AM

    Try to add this. This should fix the display problem for Android.

    @media screen and (max-width: 480px){

    .audio:not(*:root){

        left: 0;

    }

    audio::-webkit-media-controls-play-button {

        padding: 0;

        width:70px;

    }

    }

    Result:

  • Profile Image
    jayhobbs21
    Answered on January 28, 2018 at 11:34 AM

    That does does seem to do the trick on my android.  I now understand that making this work for EVERY version is not practical, but hopefully we have the bulk of them.  The Android in my family is a Samsung SM-J320-A.

    This is the form version I am now using: https://form.jotform.com/80267334690156

    This is the css I just added:

    1517156502DELETE.png

    These are the screenshots on the android, portrait and landscape:

    1517156662Android Screenshot_20180128-08  1517156701Android Screenshot_20180128-08

    In landscape, the button displays in the upper right portion of the image, but it seems to work anywhere I select it.  In portrait, it seems to overlie right in the center, but no play button.  It plays fine though.  It doesn't have to work in both orientations, if that is a problem.

    1) Any last recommendations to clean it up?

    2) My PLAY button is below the numeral, as you can see.  Is that fixable for the android without messing up the others?


  • Profile Image
    Marvih
    Answered on January 28, 2018 at 01:40 PM

    Add ", screen and (orientation: landscape)" to all @media in your CSS

    Example:


    @media screen and (max-width:480px), screen and (orientation: landscape){

    .audio {

        transform: none;

        opacity: 0.6;

        top: 20px;  /*<--was 14px tried 20*/

        left: 10px;   /*<-- was 0px tried 8*/

    }

    audio::-webkit-media-controls-play-button {

        padding: 0 40px;

    }

    }

    /*this CSS codes to align 

    the numeral & PLAY icon side by side

    on mobile.*/

    @media screen and (max-width:480px),screen and (orientation: landscape){

    [data-type="control_text"].form-col-1{width: 10%;}

    [data-type="control_text"].form-col-2 {width: 50%;}

    }

    /*for auio player on Android*/

    @media screen and (max-width: 480px), screen and (orientation: landscape){

    .audio:not(*:root){

        left: 0;

    }

    1517164753769.png

    1517164774768.png

  • Profile Image
    jayhobbs21
    Answered on January 28, 2018 at 05:16 PM

    1) Interestingly, that did not make a  change on my android.

    2) and... My PLAY button is below the numeral, as you can see.  Is that fixable for the android without messing up the others?