How to add a play button on the text area - Courses

Hey guys,

I'd like to implement a play button on my online course, I have phrases and I need them to be played once clicked.

I suppose that would be possible with HTML, I'm sending to you the html code for the text file with the styling as well, by the way where should I put the custom styling code I have? I tried putting on SIMPLE CSS but seemed not to work properly.

I really appreciate you help on this guys, I need this feature in my course, otherwise I will have to change platforms because this integration ( Phrases with an audio button) is crucial in the course I'm selling.

* That should be available by default on CoursePress, my tip for future updates.
* Actually you guys have an option to add audio in the text area but once added the name of the file appear, it would be cool to have a play button instead, plus once clicked the audio open on a new tab. =(

I will guarantee staff support on the WPMU dashboard so you can take a look.

Go to courses - Conteúdo Extra - WPMUDEV Test Unit One

cheers.

Philipe

  • Predrag Dubajic

    Hey Philipe,

    Hope you're doing well today :slight_smile:

    It looks like support access is not granted on your site so could you double check this please and try revoking and granting it again if it shows as granted already as I would like to have a closer look at your setup.

    * Actually you guys have an option to add audio in the text area but once added the name of the file appear, it would be cool to have a play button instead, plus once clicked the audio open on a new tab. =(

    Audio file can be added with embedded player without the need to go to new page, it would look like this:

    Best regards,
    Predrag

  • Predrag Dubajic

    Hi Philipe,

    If include audio like media inside text element, for example like this:

    <strong><span style=&quot;font-size: 16.0pt; mso-ascii-font-family: Cambria; mso-hansi-font-family: Cambria; mso-bidi-font-family: 'Helvetica Neue'; color: #1f497d; mso-themecolor: text2;&quot;>CRIMINOSO</span></strong></p>
    [audio mp3=&quot;http://localhost/CoursePress/wp-content/uploads/2016/11/Allegro-from-Duet-in-C-Major.mp3&quot;][/audio]</td>

    That should create audio player that fits inside the <td> tag, it should look like this:

    You can however reduce the size with some CSS code so only play button is visible, for example, using CSS like this one:

    .wp-audio-shortcode {
        width: 26px!important;
        overflow: hidden;
        float: left;
    }

    In that case the player should look like this:

    Would this solution work for you?

    Best regards,
    Predrag

  • Philipe

    Hey Predrag,

    thanks for answering,

    this player works for now, another thing is that these phrases was copied from a WORD document, all the code inside the file was transferred as well, take a look on the screenshot, it's a mess to edit this.

    Thinking about that I decided to create a HTML code for the phrases so it's easier to insert the codes, problem is that the layout isn't been copied as well, I already put the layout code of the HTML on the SIMPLE CSS but I think there was some conflict.

    Is there a way to have a CSS code separated for this purpose?

    would you mind checking the course ¨Conteúdo extra¨ unit - Test HTML with audio ?
    You will find the phrases with HTML code there.

    I'm sending to you the layout I wanna use for that.

    I'd really appreciate if you added the code for that at least for one phrase just so I can see how it works.

    thanks a lot!
    Philipe

  • Philipe

    <!DOCTYPE html>
    <html>
    <head>
    <style>

    table {
    border-collapse: collapse;
    width: 60%;
    }

    td {
    text-align: left;
    padding: 8px;
    font: 110% arial;
    color: #1E487C;
    white-space:pre-wrap;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
    opacity: 0.8;
    }

    th {

    text-align: left;
    padding: 8px;
    font: 150% arial;
    font-weight:bold;
    color: #1E487C;
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
    opacity: 0.7;
    }
    p {
    font: 150% arial;
    color: #1E487C;
    display: block;
    margin: auto;
    width: 60%;
    font-weight:bold;
    }

    tr:nth-child(even) {
    background-color: white;
    }
    tr:nth-child(even):hover {
    background-color: white;
    opacity: 0.8;
    }

    tr:nth-child(odd) {
    background: #f2f2f2;
    }
    tr:nth-child(odd):hover {
    background:#f2f2f2 ;
    opacity: 0.5;
    }
    audio {
    width: 260px;
    }

    </style>
    </head>
    <body>
    <HR width=60% align="center" size=7 color="#D3DFEE">
    <p>PARTE 40</p> <p align="right">Vocabulário em Geral</p>

    <table align="CENTER">
    <HR width=60% align="center" size=7 color="#D3DFEE">
    <tr>
    <th>CATRACA
    <audio controls width="20">
    <source src="https://courses.nativeportuguese.co/wp-content/uploads/2016/11/pt.40-1-Catraca.mp3">
    </audio></th>

    <td>A menina foi entrar na universidade passou o cartão de acesso e a catraca não destravou.
    As catracas registram a quantidade de pessoas que passam por um local.</td>
    </tr>
    </tr>
    <tr>
    <th>RECANTO
    <audio controls width="20">
    <source src="https://courses.nativeportuguese.co/wp-content/uploads/2016/11/pt.40-2-Recanto.mp3" type="audio/mpeg">
    </audio></th>
    <td>A gente reservou um hotel que se chama recanto do descanso.
    O recanto é um lugar.
    Recanto da Carne, Recanto da Comida Brasileira.</td>
    </tr>
    <tr>
    <th>ARTESANATO
    <audio controls width="20">
    <source src="https://courses.nativeportuguese.co/wp-content/uploads/2016/11/pt.40-3-Artesanato.mp3" type="audio/mpeg">
    </audio></th>
    <td>Quando a mãe dela viaja ela sempre traz artesanato.
    (produto feito a mão) O artesanato no Brasil é muito forte, principalmente nas regiões turísticas.</td>
    </tr>
    <tr>
    <th>ESTILINGUE
    <audio controls width="20">
    <source src="https://courses.nativeportuguese.co/wp-content/uploads/2016/11/pt.40-4-Estilingue.mp3" type="audio/mpeg">
    </audio></th>
    <td>O filho dele gostava de derrubar latas disparando com uma pedra no estilingue.
    As crianças brincavam com estilingue tentando atingir algum objeto.</td>
    </tr>
    <tr>
    <th>CACHOEIRA
    <audio controls width="20">
    <source src="https://courses.nativeportuguese.co/wp-content/uploads/2016/11/pt.40-5-Cachoeira.mp3" type="audio/mpeg">
    </audio></th>
    <td>Foz do Iguaçu é uma cachoeira muito grande.
    Ontem a gente fez um passeio muito bacana e todo mundo tomou banho embaixo da cachoeira.</td>
    </tr>
    <tr>
    <th>BOCHECHA
    <audio controls width="20">
    <source src="https://courses.nativeportuguese.co/wp-content/uploads/2016/11/pt.40-6-Bochecha.mp3" type="audio/mpeg">
    </audio></th>
    <td>Quico da série Chaves tem as bochechas muito grandes.
    Quando ele falou pra ela que achava ela muito bonita ela ficou com as bochechas vermelhas.</td>
    </tr>
    <tr>
    <th>TIME
    <audio controls width="20">
    <source src="https://courses.nativeportuguese.co/wp-content/uploads/2016/11/pt.40-7-Time.mp3" type="audio/mpeg">
    </audio></th>
    <td>Esse time de futebol vem ganhando muitos jogos últimamente.
    Nosso time tem que fazer alguma coisa pra reverter a situação. (equipe)</td>
    </tr>
    <tr>
    <th>PIRULITO
    <audio controls width="20">
    <source src="https://courses.nativeportuguese.co/wp-content/uploads/2016/11/pt.40-8-Pirulito.mp3" type="audio/mpeg">
    </audio></th>
    <td>A criança foi atendido pelo médico e no final da consultaele ganhou um pirulito.
    Esse pirulito é muito doce.</td>
    </tr>
    <tr>
    <th>HÁLITO
    <img src="http://image.flaticon.com/icons/svg/0/375.svg" width="50" onClick='window.open("https://courses.nativeportuguese.co/wp-content/uploads/2016/11/pt.40-8-Pirulito.mp3")'></br> </th>
    <td>Esse cara nunca escova os dentes e sempre tá com mau hálito.
    O mau hálito pode ser evitado com a higiene bucal.</td>
    </tr>
    <tr>
    <th>CRU
    <audio controls width="20">
    <source src="https://courses.nativeportuguese.co/wp-content/uploads/2016/11/pt.40-10-Cru.mp3" type="audio/mpeg">
    </audio></th>
    <td>O arroz tem que ser cozinhado por vários minutos, caso contrário vai ficar cru.
    Ele não gosta de carne muito assada, ele prefere um pouco mais crua.</td>
    </table>
    <HR width=60% align="center" size=7 color="#D3DFEE">

    </body>
    </html>

  • Adam Czajczyk

    Hello Philipe!

    You can use this code in a CoursePress unit but you'll want to "split" it into CSS and HTML part with a small adjustment.

    The HTML part below was "cut out" of your code and wrapped with "div" block element with a class named "course-audio-tables". The class name can be any name as long as it's not used anywhere else on your site and is necessary in order for CSS to address only your "audio course". Otherwise each and every table (and other elements used in CSS) would be affected across your entire site.

    To use it in your course put the "Text" module on a page, switch the editor to "Text" mode (this is very important!) and then paste the HTML code and save unit:

    <div class="course-audio-tables">
    
    <HR width=60% align="center" size=7 color="#D3DFEE">
    <p>PARTE 40</p> <p align="right">Vocabulário em Geral</p>
    
    <table align="CENTER">
    <HR width=60% align="center" size=7 color="#D3DFEE">
    <tr>
    <th>CATRACA
    <audio controls width="20">
    <source src="https://courses.nativeportuguese.co/wp-content/uploads/2016/11/pt.40-1-Catraca.mp3">
    </audio></th>
    
    <td>A menina foi entrar na universidade passou o cartao de acesso e a catraca nao destravou.
    As catracas registram a quantidade de pessoas que passam por um local.</td>
    </tr>
    </tr>
    <tr>
    <th>RECANTO
    <audio controls width="20">
    <source src="https://courses.nativeportuguese.co/wp-content/uploads/2016/11/pt.40-2-Recanto.mp3" type="audio/mpeg">
    </audio></th>
    <td>A gente reservou um hotel que se chama recanto do descanso.
    O recanto é um lugar.
    Recanto da Carne, Recanto da Comida Brasileira.</td>
    </tr>
    <tr>
    <th>ARTESANATO
    <audio controls width="20">
    <source src="https://courses.nativeportuguese.co/wp-content/uploads/2016/11/pt.40-3-Artesanato.mp3" type="audio/mpeg">
    </audio></th>
    <td>Quando a mae dela viaja ela sempre traz artesanato.
    (produto feito a mao) O artesanato no Brasil é muito forte, principalmente nas regioes turísticas.</td>
    </tr>
    <tr>
    <th>ESTILINGUE
    <audio controls width="20">
    <source src="https://courses.nativeportuguese.co/wp-content/uploads/2016/11/pt.40-4-Estilingue.mp3" type="audio/mpeg">
    </audio></th>
    <td>O filho dele gostava de derrubar latas disparando com uma pedra no estilingue.
    As crianças brincavam com estilingue tentando atingir algum objeto.</td>
    </tr>
    <tr>
    <th>CACHOEIRA
    <audio controls width="20">
    <source src="https://courses.nativeportuguese.co/wp-content/uploads/2016/11/pt.40-5-Cachoeira.mp3" type="audio/mpeg">
    </audio></th>
    <td>Foz do Iguaçu é uma cachoeira muito grande.
    Ontem a gente fez um passeio muito bacana e todo mundo tomou banho embaixo da cachoeira.</td>
    </tr>
    <tr>
    <th>BOCHECHA
    <audio controls width="20">
    <source src="https://courses.nativeportuguese.co/wp-content/uploads/2016/11/pt.40-6-Bochecha.mp3" type="audio/mpeg">
    </audio></th>
    <td>Quico da série Chaves tem as bochechas muito grandes.
    Quando ele falou pra ela que achava ela muito bonita ela ficou com as bochechas vermelhas.</td>
    </tr>
    <tr>
    <th>TIME
    <audio controls width="20">
    <source src="https://courses.nativeportuguese.co/wp-content/uploads/2016/11/pt.40-7-Time.mp3" type="audio/mpeg">
    </audio></th>
    <td>Esse time de futebol vem ganhando muitos jogos últimamente.
    Nosso time tem que fazer alguma coisa pra reverter a situaçao. (equipe)</td>
    </tr>
    <tr>
    <th>PIRULITO
    <audio controls width="20">
    <source src="https://courses.nativeportuguese.co/wp-content/uploads/2016/11/pt.40-8-Pirulito.mp3" type="audio/mpeg">
    </audio></th>
    <td>A criança foi atendido pelo médico e no final da consultaele ganhou um pirulito.
    Esse pirulito é muito doce.</td>
    </tr>
    <tr>
    <th>HÁLITO
    <img src="http://image.flaticon.com/icons/svg/0/375.svg" width="50" onClick='window.open("https://courses.nativeportuguese.co/wp-content/uploads/2016/11/pt.40-8-Pirulito.mp3")'></br> </th>
    <td>Esse cara nunca escova os dentes e sempre tá com mau hálito.
    O mau hálito pode ser evitado com a higiene bucal.</td>
    </tr>
    <tr>
    <th>CRU
    <audio controls width="20">
    <source src="https://courses.nativeportuguese.co/wp-content/uploads/2016/11/pt.40-10-Cru.mp3" type="audio/mpeg">
    </audio></th>
    <td>O arroz tem que ser cozinhado por vários minutos, caso contrário vai ficar cru.
    Ele nao gosta de carne muito assada, ele prefere um pouco mais crua.</td>
    </table>
    <HR width=60% align="center" size=7 color="#D3DFEE">
    
    </div>

    The second part is a CSS part. This one is taken out of your code as well but as you can see I added two things to it:

    - a ".course-audio-tables" class rules; just to make sure that the wrapping "div" element fits all available width;

    - a ".course-audio-tables" class name in front of all the selectors used; this is to make sure that your CSS rules will affect only the "audio course" part.

    Here's the CSS code:

    .course-audio-tables {width:100%;}
    
    .course-audio-tables table {
    border-collapse: collapse;
    width: 60%;
    }
    
    .course-audio-tables td {
    text-align: left;
    padding: 8px;
    font: 110% arial;
    color: #1E487C;
    white-space:pre-wrap;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
    opacity: 0.8;
    }
    
    .course-audio-tables th {
    
    text-align: left;
    padding: 8px;
    font: 150% arial;
    font-weight:bold;
    color: #1E487C;
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
    opacity: 0.7;
    }
    .course-audio-tables p {
    font: 150% arial;
    color: #1E487C;
    display: block;
    margin: auto;
    width: 60%;
    font-weight:bold;
    }
    
    .course-audio-tables tr:nth-child(even) {
    background-color: white;
    }
    .course-audio-tables tr:nth-child(even):hover {
    background-color: white;
    opacity: 0.8;
    }
    
    .course-audio-tables tr:nth-child(odd) {
    background: #f2f2f2;
    }
    .course-audio-tables tr:nth-child(odd):hover {
    background:#f2f2f2 ;
    opacity: 0.5;
    }
    .course-audio-tables audio {
    width: 260px;
    }

    This code shouldn't be added to a course unit but instead:

    - if you are using a child-theme on your site, you can add it to the "style.css" file of that child theme
    - alternatively, you can install and enable the "Simple Custom CSS" plugin that you will find here:

    https://wordpress.org/plugins/simple-custom-css/

    and then put the above CSS into the "Custom CSS" textbox on "Appearance -> Custom CSS" page in your site's dashboard.

    After you save that code as well, the "audio course" should work well. I checked it on my sandbox and it seems to work quite nicely.

    In case you'd like to add further modules like this, you do not need to create another piece of CSS. All that would be to do, would be to copy the HTML part of the code, replace audio URLS and texts in table cells and paste it into another "Text" module in CoursePress. The CSS styling should then by applied automatically.

    I hope that helps!

    Best regards,
    Adam

  • Adam Czajczyk

    Hello Philipe!

    In the "Custom CSS" box on "Appearance -> Custom CSS" page please replace this code:

    .course-audio-tables {width:100%;}
    
    .course-audio-tables table {
    border-collapse: collapse;
    width: 60%;
    }

    with this one:

    .course-audio-tables {width:100%;}
    
    .course-audio-tables hr {width:100%;height:0px; border:0; border-top: 7px solid #D3DFEE;}
    
    .course-audio-tables table {
    border-collapse: collapse;
    width: 100%;
    }

    This should take care of overall table width/placement and the look of the horizontal line.

    As for "white space/text wrapping". This actually works as expected because there's no formatting of that kind within the text. There are two options:

    - you may try to edit these text in a unit editor (where you copied the HTML part of the code to) by in Text mode by adding "br" (new line) tags where necessary, e.g:

    <td>A menina foi entrar na universidade passou o cartao de acesso e a catraca nao destravou. <br />As catracas registram a quantidade de pessoas que passam por um local.</td>

    or you can simply enter new lines by... hitting "enter" while in "Visual" mode of an editor. I asked you to use the "Text" mode but I should be more specific: it's an important condition when you are adding your HTML code but after it's already there and it's saved, you should be able to edit content with visual editor as well. I would suggest making minor changes only as it may be easy to unintentionally e.g. remove part of the table but formatting text in table cell should be fine.

    I guess this also answers your other question about adding new lines with "Enter" :slight_smile:

    Best regards,
    Adam

  • Adam Czajczyk

    Hello Philipe!

    The "mobile" views require some additional CSS. The code below should mostly help but you may want to tweak it slightly because it may behave a bit differently with your site's current theme than with mine.

    Add following code to the "Custom CSS" box on "Appearance -> Custom CSS" page below existing code:

    /* for "tablet" views */
    @media screen and (max-width: 768px) {
     .course-audio-tables th {
        width:150px;
        overflow:hidden;
      }
     .course-audio-tables audio {
        width:120px;
      }
    }
    
    /* for "mobile" views */
    @media screen and (max-width: 480px) {
     .course-audio-tables th {
        width:115px;
        overflow:hidden;
        font-size:18px;
      }
      .course-audio-tables td {
        font-size:13px;
      }
     .course-audio-tables audio {
        width:70px;
        font-size:8px;
      }
    }

    As you see there are two similar "block". The first one is addressing devices with a screen size of up to 768 pixels wide. CSS rules inside that block are the rules that already exist in your (previous) code but will be used instead of them in case of these devices. The same rule apply to the second block of code, except it's for even smaller devices.

    You may want to tweak (increase/decrease) % and px values in both segments of code to meet your design requirements :slight_smile:

    I hope that helps!

    Best regards,
    Adam

  • Adam Czajczyk

    Hello Philipe!

    The player has been minimized indeed but I had to make it fit on the screen somehow and without redoing both HTML and CSS codes it's difficult to find another way than just making it smaller.

    I'm not really sure how would you like that to look on mobile and I must say that I'm not much of the designer so if you could e.g. provide me with some rough sketch/drawing of how this could look in mobile view I could give it a try. Please note however that even though I'll do my best to make it work, I can't give you any guarantee until I try and test that.

    Best regards,
    Adam

  • Philipe

    hey Adam, thanks a lot, actually on mobile we don't have a lot of space to work with, we could have just a PLAY button that would reproduce the audio, the progress bar isn't necessary since its short phrases, the volume bar either (people adjust volume on the device).

    in other other words, the only thing that's crucial is the play button. (looking better).
    something like this would work on mobile.
    https://www.slatecube.com/images/play-btn.png
    or this one http://codropspz.tympanus.netdna-cdn.com/codrops/wp-content/uploads/2012/12/AudioPlayer.jpg

    what do you think?

    thanks again!! =)

  • Adam Czajczyk

    Hello Philipe!

    I was thinking more like e.g. moving the player in other position and/or reorganizing the content a bit for mobile view (slightly because CSS wouldn't let us do the "full revolution" there).

    The player itself is a browser native player and doesn't come from the site. It does look different on Chrome and FIrefox and also differ depending on device (Apple may be a bit different than Windows version).

    Unfortunately, full CSS styling "audio" tag is not currently possible (e.g. to make it look like on one of the pictures that you attached) so it would have to be done a different way:

    - remove the "controls" (skip the "controls" attribute in "audio" tag in HTML code)
    - create your own "skin" with HTML+CSS
    - build your own JS "engine" to control player.

    This entire process is well described in this article:

    https://www.theparticlelab.com/building-a-custom-html5-audio-player-with-jquery/

    and similar (though slightly different) way in this one:

    http://www.alexkatz.me/html5-audio/building-a-custom-html5-audio-player-with-javascript/

    This would however go outside the scope of this support forum and require custom development so in case you decided to go this way, you may want to post a question on our "Jobs & Pros" job board (please note: no WPMU DEV staff involved!) here:

    https://premium.wpmudev.org/wordpress-development/

    If you could think however of some minor "re-organization" of the content presentation for mobile views I'd be happy to give it a try and hopefully we'll find some kind of compromise on this :slight_smile:

    Best regards,
    Adam

  • Philipe

    Seems perfect Adam,

    I got a new Javascript code that avoid 2 audios playing at the same time, do I need to insert any code on the Custom CSS to activate this? I put the Javascript code inside the TEXT AREA but it didn't work. (the original file works, just when its copied to the text area that doesn't)

    that's the code I'm inserting after the table with the phrases.

    <script type="text/javascript">
    function createCookie(name,value,days) {
    if (days) {
    var date = new Date();
    date.setTime(date.getTime()+(days*24*60*60*1000));
    var expires = "; expires="+date.toGMTString();
    }
    else var expires = "";
    document.cookie = name+"="+value+expires+"; path=/";
    }

    function readCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';':wink:;
    for(var i=0;i < ca.length;i++) {
    var c = ca[i];
    while (c.charAt(0)==' ':wink: c = c.substring(1,c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
    }

    function eraseCookie(name) {
    createCookie(name,"",-1);
    }

    // default audio autoload
    players = document.getElementsByTagName("audio":wink:
    //~ players[0].play() // uncomment that to enable autoplay

    if (readCookie("player":wink: == "1":wink: {
    players[0].play()
    }

    // pause other players at play (if any) in example, podcasts previewing while listening radio or other
    window.addEventListener("play", function(evt)
    {
    // first, create a cookie because a player was pressed
    createCookie("player", "1":wink:

    // pause the current active player
    if(window.$_currentlyPlaying && window.$_currentlyPlaying != evt.target) // avoid pause element if it's same than previous
    {
    window.$_currentlyPlaying.pause();
    }
    window.$_currentlyPlaying = evt.target;
    }, true);

    // set cookie to 0 when paused
    window.addEventListener("pause", function(evt)
    {
    createCookie("player", "0":wink:
    }, true);
    </script>

    looking forward!!
    Philipe

  • Philipe

    Hey Adam and Predrag, thanks a lot for your help, I used the code

    <p><script type="text/javascript">
     document.addEventListener('play', function(e){
        var audios = document.getElementsByTagName('audio');
        for(var i = 0, len = audios.length; i < len;i++){
            if(audios[i] != e.target){
                audios[i].pause();
            }
        }
    }, true);
    </script></p>

    it worked perfectly.

    Another quick question: the text on Samsung is working great, the play button is smaller so it makes space for the text, although with iPhone I'm having problems because of the big player, take a look on screenshot.

    is there a way of changing the look of it by adding some CSS ?

    thanks a lot!

    Philipe

  • Adam Czajczyk

    Hello Philipe!

    I don't have iPhone to test it with, unfortunately but when tested in an emulator a change of this code

    /* for "mobile" views */
    @media screen and (max-width: 480px) {
     .course-audio-tables th {
        width:115px;
        overflow:hidden;
        font-size:18px;
      }
      .course-audio-tables td {
        font-size:13px;
      }
     .course-audio-tables audio {
        width:70px;
        font-size:8px;
      }
    }

    to this one

    /* for "mobile" views */
    @media screen and (max-width: 480px) {
     .course-audio-tables th {
        width:100px!important;
        overflow:hidden;
        font-size:18px;
      }
      .course-audio-tables td {
        font-size:13px;
        min-width:200px;
      }
     .course-audio-tables audio {
        width:70px!important;
        font-size:8px;
      }
    }

    seems to help. Give it a try please and let me know if it worked for you with real devices. In case it didn't I'll pass that on to one of my colleagues that do have physical device at hand to test with.

    Best regards,
    Adam

  • Adam Czajczyk

    Hello Philipe!

    I'm sorry it didn't work for you. I got one of my friends to test this on an iPhone device and we also tested some changes to the CSS. It seems though that on a real iPhone the "audio" tag appears to be very "stubborn" and doesn't "want to" reflect the changes made.

    Despite that, you might want to check another piece of code. Replace the same last part please with this one:

    /* for "mobile" views */
    @media screen and (max-width: 480px) {
     .course-audio-tables th {
        width:150px;
        overflow:hidden;
        font-size:18px;
      }
      .course-audio-tables td {
        font-size:13px;
      }
     .course-audio-tables audio {
        display:block;
        width:70px;
        font-size:8px;
      }
    }

    I did some additional research on this and it seems that the "audio" tag on Safari doesn't take width/height parameters into the account unless the element is (I know, it's counter-intuitive) playing... video files. Otherwise it seems to be using default values.

    Therefore, if above code doesn't work for you either It would mean that the way to change it would be to create your own "interface" after all, as mentioned in this post of mine:

    https://premium.wpmudev.org/forums/topic/how-to-add-a-play-button-on-the-text-area-courses#post-1171731

    This would however be outside the scope of this support forum. I can see though that you already dealt with JS code so I think you should be able to handle this with both tutorials that I shared previously. You may also consider asking a question on our "Jobs & Pros" job board (please note: no WPMU DEV staff involved!) here:

    https://premium.wpmudev.org/wordpress-development/

    Kind regards,
    Adam

  • Philipe

    Hey Adam, everything was working fine but recently (maybe after the last Wordpress update) the PLAY buttons are not working anymore !! take a look on the Screenshot.

    Do you think I have to change some CSS code for that?

    That's the CSS I'm using for the mobile and tablet view

    /* for "tablet" views */
    @media screen and (max-width: 768px) {
     .course-audio-tables th {
        width:150px;
        overflow:hidden;
      }
     .course-audio-tables audio {
        width:120px;
      }
    }
    
    /* for "mobile" views */
    @media screen and (max-width: 480px) {
     .course-audio-tables th {
        width:5px;
        overflow:hidden;
        font-size:18px;
      }
      .course-audio-tables td {
        font-size:13px;
        width:-40px;
      }
     .course-audio-tables audio {
        width:1px;
        font-size:1px;
    
      }
    }

    That's how I have the Javascript code:

    <div class="course-audio-tables"><hr align="center" size="7" width="60%" />
    <audio controls="loop" style="width: 100%">
    <source src="https://courses.nativeportuguese.co/wp-content/uploads/2016/11/Frases_Audio_Vocab_42.mp3" type="audio/mpeg" />
    </audio>
    <table align="CENTER">
    <tbody>
    <tr>
    <th>VERBA <br> <audio controls="controls">
    <source src="https://courses.nativeportuguese.co/wp-content/uploads/2016/11/pt.42-1-Verba.mp3" />
    </audio></th>
    <td>
    O governo aprovou o projeto que libera 20 bilhões de reais em verbas para investir na saúde pública.<br/>
    A verba é a maneira mais formal de se referir ao dinheiro.
    
    </td>
    </tr>
    <tr>
    <th>ANÃO <br> <audio controls="controls">
    <source src="https://courses.nativeportuguese.co/wp-content/uploads/2016/11/pt.42-2-Anao.mp3" type="audio/mpeg" />
    </audio></th>
    <td>
    Branca de neve e os sete anões.<br/>
    Tyrion Lannister da série Game Of Thrones é um anão.
    
    <hr align="center" size="7" width="60%" /></div>
    <p><script type="text/javascript">
     document.addEventListener('play', function(e){
        var audios = document.getElementsByTagName('audio');
        for(var i = 0, len = audios.length; i < len;i++){
            if(audios[i] != e.target){
                audios[i].pause();
            }
        }
    }, true);
    </script></p>

    Any idea on what that could be?

    Thanks a lot for you help!!

    Philipe

  • Adam Czajczyk

    Hello Philipe!

    By "not working" do you mean that the audio doesn't play when you click on them or that they look different than they did before?

    Could you please grant a support access to your site so I could take a closer look (I won't do any changes) and tell me in which course I will find them? Here's a guide on how to enable access:

    https://premium.wpmudev.org/manuals/wpmu-dev-dashboard-enabling-staff-login/

    Kind regards,
    Adam

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.