WebSite X5Help Center

 
Heather Risher
Heather Risher
User

Audio Player in Blog  en

Autor: Heather Risher
Besucht 2471, Followers 1, Geteilt 0  

Hello there again

I am trying to add a media file to my blog posts but cannot find an audio player code that will work, or at least will render in the preview window. I found one code ->

<audio controls=""><iframe src="https://archive.org/download/Rr-Dr.RonnieLuv-Ep04-01-25-14/Rr-Dr.RonnieLuv-Ep04-01-25-14.mp3"  width="350" height="60" frameborder="0"></iframe> 

That will show anything where the player should appear. It gives me an error -> Error -324 when loading url http://127.0.0.1:8080/blog/

Gepostet am
14 ANTWORTEN - 1 KORREKT
Anthony A.
Anthony A.
User

Heather,

you don't need an Iframe for html5 audio player.

here is the simple crossbrowser code for you

<audiocontrols>
  <sourcesrc="horse.ogg"type="audio/ogg">
  <sourcesrc="horse.mp3"type="audio/mpeg">
Your browser does not support the audio element.
</audio>

if you have different versions of your audio file (.ogg, .mp3, .mp4, ...)

list them over there and upload all of them to your host, in that case no matter what type of device your visitor uses to visit your website, they would be able to listen to your song.

internet browser will always play the first compatible one.


if this post is the correct answer, please mark this answer as correct answer.

------------------------------------------------------------

Good Luck
http://www.nuluhost.com (6 months free Web Host for x5 users, promo code: usx56m)
http://www.wdesigners.us
http://www.usx5.com

Mehr lesen
Gepostet am von Anthony A.
Heather Risher
Heather Risher
User
Autor

Thank you for the prompt response.

Ah, now that I copy the preview link into my normal browser I can see the audio player using that link you provided. Thank you. However, the audio is not there per se. It shows an "empty" player for lack of a better description at the moment. So I can't actually play anything and it shows me it has 0:00 minutes available for play. I've attached a screen shot.

The code I am using straight from the post is:

Your browser does not support the audio element.

This same code works in my current Blogspot, same browser and links.

Mehr lesen
Gepostet am von Heather Risher
Heather Risher
Heather Risher
User
Autor

Here.... let's try the code again so it posts... sorry! I am teaching myself about html as I go.

<audio controls>

< source src="https://archive.org/download/RROS11/RR - Dr. Ronnie Luv - Ep 13 - 04-12-14.ogg" type="audio/ogg">

</source><source src="https://archive.org/download/RROS11/RR - Dr. Ronnie Luv - Ep 13 - 04-12-14.mp3" type="audio/mpeg">

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

</audio>

Mehr lesen
Gepostet am von Heather Risher
Anthony A.
Anthony A.
User

So if I am understanding it correctly, your audio sources are not internal?

this code does not download from another website nor stream! this is very simple generic code that work with every single web browser and devices.

try local files and see what will happened.

your source should be like <source src="files/horse.ogg" type="audio/ogg">

and you don't need to close the source tag with this player.

Suggestion:

It would be better for you to upload your website in a test environment (like a subdomain)

so in that case you would be able to test everything inside the server and not local.

if this post is the correct answer, please mark this answer as correct answer.

------------------------------------------------------------

Good Luck
http://www.nuluhost.com (6 months free Web Host for x5 users, promo code: usx56m)
http://www.wdesigners.us
http://www.usx5.com

Mehr lesen
Gepostet am von Anthony A.
Anthony A.
Anthony A.
User

I add little more code inside the player it might help you to understand it

<audio style="width:550px; margin: 0 auto; display:block;" controls>
  <source src="http://yourdomain.com/files/welcome-to-my-town.ogg" type="audio/ogg">


  <source src="http://yourdomain.com/files/welcome-to-my-town.mp3" type="audio/mpeg">

<source src="http://yourdomain.com/files/welcome-to-my-town.mp4" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

if this post is the correct answer, please mark this answer as correct answer.

------------------------------------------------------------

Good Luck
http://www.nuluhost.com (6 months free Web Host for x5 users, promo code: usx56m)
http://www.wdesigners.us
http://www.usx5.com (Templates and support for x5 )

Mehr lesen
Gepostet am von Anthony A.
Heather Risher
Heather Risher
User
Autor

Hi Anthony-

I spent awhile last night trying to get something to work, but it seems like the blog for some reason isn't accepting any of the codes. I enabled the HTML button in the post and have gotten a YouTube video to work properly.

I have used a local file, the external link (where all of our shows are sitting), and I have uploaded it to the one.com server and used that link. I have tried all of these combinations in the link you provided as well as a few others - including an iframe code. I also exported the site to my domain prematurely to see if that made a difference and it didn't either.

Now the iframe code we used worked, but it pulled the wrong file from our archive (even though I provided the correct link and verifyed it was the correct show). When I change the link it no longer works.

I am able to get these links to work in any other page of the website, in both text and html blocks. The blog just isn't acceptong them

I can see where one can upload media/audio to go with the blog post, but I'd rather not have them take up server space when I have them in an online archive already.

Any suggestions would be greatly appreciated. This is my only hang-up right now.

Mehr lesen
Gepostet am von Heather Risher
Anthony A.
Anthony A.
User

would you please provide me the address of your blog (test page) that I suggest you earlier? I would like to see the behavior of your blog when its actualy up and running inside your server.

if you dont feel comftable here, you would be able to send me an email, contact me at infoATusx5DOTcom

------------------------------------------------------------

Good Luck
http://www.nuluhost.com (6 months free Web Host for x5 users, promo code: usx56m)
http://www.wdesigners.us
http://www.usx5.com (Templates and support for x5 )

Mehr lesen
Gepostet am von Anthony A.
Heather Risher
Heather Risher
User
Autor

The site is an 18+ site, the links I am providing have nothing NSFW except the audio once you get about 20 seconds in (which are set to autoplay)

Ok so the blog where the player works:

http://theluvoffice.com/blog/index.php?id=6d2vub7h

Blog post where same code (different link) does not work:

http://theluvoffice.com/blog/index.php?id=927dd9rk

And the webpage (not connected to the blog) where both codes work:

http://theluvoffice.com/test-page.html

Thank you for the time and thought you have put into helping me! I really appreciate it

Mehr lesen
Gepostet am von Heather Risher
Anthony A.
Anthony A.
User

Heather,

I used the code you are using in your first link (which is working)

Ok so the blog where the player works:

http://theluvoffice.com/blog/index.php?id=6d2vub7h

and I added to my test blog, everything works just fine.

on the second one, your code is not correct, remove the marked part:

<iframe allowfullscreen="" frameborder="0" height="100" src="<span class="strikethrough"><span class="fs16">//archive.org/download/RROS3/RR - Dr. Ronnie Luv - Ep 03 - 01-18-14.mp3</span>" width="560"></iframe>

then it will work just fine.

on your third link, you code does not includes that extra code (<span>), this is why both are working.

if this post is the correct answer, please mark this answer as correct answer.

------------------------------------------------------------

Good Luck
http://www.nuluhost.com (6 months free Web Host for x5 users, promo code: usx56m)
http://www.wdesigners.us
http://www.usx5.com (Templates and support for x5 )

Mehr lesen
Gepostet am von Anthony A.
Heather Risher
Heather Risher
User
Autor

Thank you, now... how do I prevent the <span> code from entering the main code? It isn't there when I paste the code into the post. The code that you suggested removing </ span> was entered as:

<iframe allowfullscreen="" frameborder="0" height="100" src="<span>//archive.org/download/RROS3/RR - Dr. Ronnie Luv - Ep 03 - 01-18-14.mp3" width="560"></iframe>

Since this same exact code was used on the third link I wonder if there is something in the blog itself that is ading the code? Since it is just in the blog I am having this issue.

Mehr lesen
Gepostet am von Heather Risher
Heather Risher
Heather Risher
User
Autor

Actually it was entered as:

<iframe allowfullscreen="" frameborder="0" height="100" src="<span class="strikethrough"><span>//archive.org/download/RROS3/RR - Dr. Ronnie Luv - Ep 03 - 01-18-14.mp3" width="560"></iframe>

I didn't have span in the code at all that I can see... until I submit it somewhere (as was done in previous post)

Mehr lesen
Gepostet am von Heather Risher
Heather Risher
Heather Risher
User
Autor

Ok... I see somehow span is just plain being added to the code...

Any idea on how to prevent that?

Thanks!!!

Mehr lesen
Gepostet am von Heather Risher
Anthony A.
Anthony A.
User

To be honest with you, I have no clue how you manage to add that span code over there,lol

normaly x5 will not add extra code to the links, scripts, or codes.

if this post is the correct answer, please mark this answer as correct answer.

------------------------------------------------------------

Good Luck
http://www.nuluhost.com (6 months free Web Host for x5 users, promo code: usx56m)
http://www.wdesigners.us
http://www.usx5.com (Templates and support for x5 )

Mehr lesen
Gepostet am von Anthony A.
Heather Risher
Heather Risher
User
Autor

Lol! I figured that would be the answer! I think it has to do with fonts and how I am pasting them. I have gotten a few more to work since I wrote that last post.

Thank you VERY much for your insight and help! I think I can figure it out from here :-)

Mehr lesen
Gepostet am von Heather Risher