Insert html5 audio player in posts by adding <audio> tag in a post doesn't work

Hello,

I have tried to add a simple html5 audio player in a post by using the html "audio" element
The problem is that the tag is removed by the editor. I add the audio tag in " View -> source code "
1- Where can I authorize the "audio" tag to be used in the editor ? Am I using the correct method for inserting a sound + html5 player in a post ? Am I using the correct method for that ?

2- Suggestion - Would it be possible to add a new button for adding sounds + player in articles ? A button "Add sound" could be located next to the "Add video" button for example. How can I do that ?

Thank for your help

  • View
    1576
  • More
Replies (8)

    • For radio streaming, this is the code  embed i use for the html5 player:

      <audio id="stream" style="width: 400px;" preload="none" controls="controls">

      <source src="https://domainame.com/port/stream" type="audio/mpeg" /></audio>

      For mp3 files, this the embed code:

      <audio controls="controls">

        <source src="audiofilename.ogg" type="audio/ogg" />

        <source src="audiofilename.mp3" type="audio/mpeg" />

      Your browser does not support the audio element.</audio>

      The text editor adds the p tag at the ends, but it still works.

      Posts App also comes with audio attach/insert option

      image_transcoder.php?o=bx_froala_image&h=4521&dpx=2&t=1610950096

      • M

        Hello Jose,

        Thanks for your reply. I have been using the same code for inserting mp3 files, but when I "submit" the blog post, only "Your browser does not support the audio element." between <p> tags remains in the text body (and also an empty p tag where the audio tag was). The player doesn't show. When I edit the post, all audi tags have been removed.
        I do not see the audio attach/insert option...
        I am on UNA 11.0.4, tested on various browsers.
        Do I miss a setting somewhere ?

        • M

          For the moment I can use the video tag in order to display the mp3 files player. I embed the code manually in the blog post. This is a temporary fix.
          How can I display this "attach/insert" option for mp3 ?
          Thank you

          • Hello Miroslav !

            If you have the installed Froala editor then you may add the 'audio' item to the editors in Studio->Froala app directly.

            • M

              Thank you Leonids.

              • Jose Sadel , I added the embed code you sugjested for the radio app but it doesn't seem to be working for me. Can you look at the following for me please. I must be doing something wrong.

                <audio id="stream" style="width: 400px;" preload="none" controls="controls">

                <source src="https://tunein.com/radio/Biker-Radio-s190319" type="audio/mpeg" /></audio>

                I also tried this iframe code and it works fine on my laptop  (except in Chrome browser)  but it won't work on mobiles at all.

                <iframe width="100%" height="315" src="https://tunein.com/radio/Biker-Radio-s190319" frameborder="0"  allowfullscreen></iframe>

                • Hello Jose,

                  Thanks for your reply. I have been using the same code for inserting mp3 files, but when I "submit" the blog post, only "Your browser does not support the audio element." between

                  tags remains in the text body (and also an empty p tag where the audio tag was). The player doesn't show. When I edit the post, all audi tags have been removed.
                  I do not see the audio attach/insert option...
                  I am on UNA 11.0.4, tested on various browsers.
                  Do I miss a setting somewhere ?

                  Hello Miroslav, 

                  It looks like the audio attach/insert option, that i showed up there, is only available when using the Posts app and on UNA v12. 

                  For embbeding html on the post, apparently it only works for Admin posts, not for standard members; probably due to security.

                   

                  • Jose Sadel , I added the embed code you sugjested for the radio app but it doesn't seem to be working for me. Can you look at the following for me please. I must be doing something wrong.

                    I also tried this iframe code and it works fine on my laptop  (except in Chrome browser)  but it won't work on mobiles at all.

                    Hi John,

                    When you say radio app, are you referring to Gerome's Radio Station App https://una.io/page/view-product?id=348 ?

                    In any case, the embed player only works if you are posting as an admin of your site, and this will be the iframe from the itunes:

                    <iframe src="https://tunein.com/embed/player/s190319/" style="width:100%; height:100px;" scrolling="no" frameborder="no"></iframe>

                    Gerome's Radio app also has the option to paste the direct url stream, but at the moment looks like it's only taking secure url with SSL certificate, and in your case your radio direct-url doesn have ssl.

                    I done the above test on UNA 12 b2, on my dev site...

                    Login or Join to comment.