Comic Fury Webcomic Hosting - Videos/Music in your Extra Website page(s)?

You are not logged in. Log in, Register, More info
Forum > Layouts, HTML, CSS & Javascript > Videos/Music in your Extra Website page(s)?
Pages: [1] [2]

"Videos/Music in your Extra Website page(s)?", 31st Jul 2019, 8:46 PM #1
CrosEL

User avatar
Posts: 846
Registration date: 9th Mar 2018
Location: America
Is this possible to do?
_______________________
Me: I suck...

God: Who told thee that thou suck?


image
1st Aug 2019, 5:46 AM #2
BlueDragon

User avatar
Posts: 645
Registration date: 7th Jan 2015
Location: Missouri
Yes! There is. You have to have a place to upload your audio into that's not Comic Fury (at least, I got a prompt saying it was not a supported file.) I have a word press, so I just uploaded it there.

Here's what I came up with:

Music Test Page
(please excuse the mess of a page, this is just my test website for when I'm trying to code. It's not supposed to look nice XD)

What you need to do on your extras page is click "source." It's to the left of the floppy disk image.

The code you need to can use is this:

<audio controls>
<source src="PUT YOUR FULL MUSIC FILE LINK HERE" type="audio/mpeg">
<source src="PUT YOUR FULL MUSIC FILE LINK HERE" type="audio/ogg">
Your browser does not support the audio tag.
</audio>

For example, on my page, the code looks like this:

<audio controls=""><source src="http://www.ceruleandreams.org/wp-content/uploads/2019/08/outro-ashleen-soundtrack-take-1.mp3" type="audio/mpeg" /> <source src="/http://www.ceruleandreams.org/wp-content/uploads/2019/08/outro-ashleen-soundtrack-take-1.mp3" type="audio/ogg" /> Your browser does not support the audio tag.</audio>

Edit: the "your browser does not support the audio tag" line I think is just what pops up if the person on your site can't listen to music. That will show up in place of your audio file for them. I think.

Second edit:
I haven't tested anything for videos yet, but I did find this code. If I have time tomorrow, I might test it out if you're still interested. I've been working kinda hard this week...so I'm going to check out and play some Stardew Valley now XD Soooo addictive XD

<video src="Your video link here" width="50%" controls>
<p>If you are reading this, it is because your browser does not support the 'video' element. Try using the 'object' element listed further down the page.</p>
</video>
<p>If you can see the video controls but the video doesn't play when you click the "Play" button, your browser might not support this file type (i.e. <code>Ogg</code>). In this case, try the same code, but with a different file format.</p>
_______________________
1st Aug 2019, 9:31 AM #3
xwindows
ascii man
User avatar
Posts: 144
Registration date: 23rd Dec 2014
BlueDragon:<audio controls=""><source src="http://www.ceruleandreams.org/wp-content/uploads/2019/08/outro-ashleen-soundtrack-take-1.mp3" type="audio/mpeg" /> <source src="/http://www.ceruleandreams.org/wp-content/uploads/2019/08/outro-ashleen-soundtrack-take-1.mp3" type="audio/ogg" /> Your browser does not support the audio tag.</audio>

Wrong:

- Don't specify MP3 audio file with `audio/ogg` MIME type.
- Don't prefix `/` in front of `http://` in the URL.

Back to the question...

If you only provided a single audio file, use this shorthand HTML code:
<audio controls src="URL OF THE AUDIO FILE">(Your browser cannot play HTML5 audio)</audio>
(Replace "URL OF THE AUDIO FILE" accordingly)

If you provided both Ogg and MP3 file (1), use this:
<audio controls>
	<source type="audio/ogg" src="URL OF THE OGG FILE">
	<source type="audio/mpeg" src="URL OF THE MP3 FILE">
	(Your browser cannot play HTML5 audio)
</audio>
(Replace "URL OF THE OGG FILE" and "URL OF THE MP3 FILE" accordingly)

For example, this code would play Joplin's cliched "The Entertainer" song from Wikimedia Commons server, in either Ogg (original) or MP3 (converted) format:
<audio controls>
	<source type="audio/ogg" src="https://upload.wikimedia.org/wikipedia/commons/1/1b/The_Entertainer_-_Scott_Joplin.ogg">
	<source type="audio/mpeg" src="https://upload.wikimedia.org/wikipedia/commons/transcoded/1/1b/The_Entertainer_-_Scott_Joplin.ogg/The_Entertainer_-_Scott_Joplin.ogg.mp3">
	(Your browser cannot play HTML5 audio)
</audio>


If you would really, really, like to make the audio play automatically; add the word "autoplay" after "controls", with space between them. (But beware that viewers with cellular internet might strangle, stab, or shoot you, if you misuse this)

For video, I think it is best just to use video sharing site (e.g. YouTube)-provided embed code rather than rolling your own, since it usually provide its own sophisticated switching between video formats and myriad of bit rates; so it could still play even when your viewer's connection is not lightning fast.

-----

Note: A shortcoming of HTML5 audio specification is it does not allow proper fallback when browser does not support the file format, unless you write JavaScript. The text you see inside `<audio>` tag would only appear when the browser does not recognize HTML5 audio at all.

My browsers (Pale Moon 25.x and Opera 11.x) does HTML5 audio, but with Ogg format, not MP3. The browsers' built-in player would silently disappear, or simply do nothing if it encountered `<audio>` tag with only MP3 file specified.

(1) Providing both Ogg and MP3 format for each track should cover all browsers with HTML5 audio support.

- The free-for-all Ogg format is long supported by whole Mozilla family (Firefox and many others), Opera, and Chrome(ium) since the early days of HTML5; it would still play even when the viewer's browser is not modern. Today, Apple still refuse to support it in Safari; while Microsoft Edge on Windows 10 since middle of the last year would play it.
- MP3 is pushed by Apple and Microsoft (as they already paid licensing fee), so it is supported in IE/Edge and Safari. As associated patents are expired recently, other browsers would gradually add support for it; but it will require a very recent browser version to play.
1st Aug 2019, 5:53 PM #4
BlueDragon

User avatar
Posts: 645
Registration date: 7th Jan 2015
Location: Missouri
Oh, sorry. I don't usually code much. It just worked on my site, so. Thanks for the correction!
_______________________
3rd Aug 2019, 1:40 AM #5
CrosEL

User avatar
Posts: 846
Registration date: 9th Mar 2018
Location: America
Sorry for not replying for days, stuff happened..

And thanks, SERIOUSLY hoping I can remember this.


Also this:

If you only provided a single audio file, use this shorthand HTML code:

If you provided both Ogg and MP3 file (1), use this:


You mean copy/paste the URL directly from a source? I mean
like.. I'd need to find whatever music I want on a specific site?
(I wish I could explain what I'm talking about better...) Um, would I be
able to use Youtube URLs or?...

(I typed this BEFORE looking at any links provided: and this is very new for me...)

EDIT: Also might keep bumping this to keep this fresh in my latest activity thing, since there's no search engine for the threads. ..
_______________________
Me: I suck...

God: Who told thee that thou suck?


image
3rd Aug 2019, 1:42 AM #6
Kokoneos

User avatar
Posts: 518
Registration date: 27th Jun 2015
Location: Hill Valley
You can always bookmark this thread or save the code on a notepad on your computer! :)
_______________________
image
3rd Aug 2019, 1:48 AM #7
CrosEL

User avatar
Posts: 846
Registration date: 9th Mar 2018
Location: America
Thanks for the idea: Right now I'm trying to get what they mean at first, and
am trying to figure time to do this.

Once I get a idea of what's happening, I'll probably be going back and forth between
the extra site and this thread, ...this is kinda rough for someone who hasn't
programmed in years, lol!
_______________________
Me: I suck...

God: Who told thee that thou suck?


image
3rd Aug 2019, 9:11 AM #8
BlueDragon

User avatar
Posts: 645
Registration date: 7th Jan 2015
Location: Missouri
I'm not a programmer, but I didn't want you to think I was ignoring your question. You should probably ask XWindows who would be better equipped to answer you questions :) Hopefully he'll pipe in again, 'cause his information last time was awesome! (I learned something new from it, anyway :3)


If they don't get back to you, this is the websites I used:

Music:
https://tutorialehtml.com/en/html-tutorial-embed-audio/

Video (there's a youtube code on it, too, where you can use the url):

https://www.quackit.com/html/codes/html_video_codes.cfm

I think YouTube is fairly straightforward, since many people enable the coding for sharing. So, I clicked "share" on a video, selected "embed," copied the code, then went to my extra's page, selected "source" and pasted the code.

That's just for YouTube. I use the Firefox browser, in case that makes a difference.

This is the result, and for my browser it works.

Test Page

When you say "extra site," I'm assuming you're talking about the "extra page" addition here on comic fury. If it's like a Wordpress site...I can barely handle the coding on my own website XD It functions, so...that's all I care about. I don't think I'd be equipped to help you with an actual full blown website, though :*(
_______________________
"The devil is in the detail...", 3rd Aug 2019, 10:19 AM #9
xwindows
ascii man
User avatar
Posts: 144
Registration date: 23rd Dec 2014
CrosEL:You mean copy/paste the URL directly from a source? I mean
like.. I'd need to find whatever music I want on a specific site?

You need to mention which site exactly you are trying to use music from in this case.

@BlueDragon's first answer and my previous answer are only valid if you are using music from your own website (or "traditional" kind of website, generally speaking).

CrosEL:(I wish I could explain what I'm talking about better...) Um, would I be
able to use Youtube URLs or?...

This means you need to make something clear first:

1. You need to distinguish between music and video. (The so-called "music" you see on YouTube are actually video; while "music" on SoundCloud or Wikimedia Commons are actually music- only sound, no picture)
2. You need to distinguish between URL of the media player page, and URL of the media file itself.

In case of YouTube (and virtually any other video/music sharing site), the URL you normally see is the player's page; the URL of media files are closely guarded and only valid temporarily, so you cannot easily reach them without having ninja skills or without using a mercenary to find them when you need them.

Directly using HTML5 audio/video needs URL of the media file, not player. If you source the video from YouTube, you won't have it. This is one of the reasons I recommend you to use YouTube's embeded player instead of using HTML5 video directly. (Other reasons are already mentioned in my earlier post)

-----

To add a so-called YouTube "music" (read: video) to your extra page, see the following example:

This is a player URL of a flashmob version of Beethoven's cliched "Ode to Joy" song:
https://www.youtube.com/watch?v=kbJcQYVtZMo

And this is an embedded player URL of the same video (take note of the same video ID, but different URL pattern):
https://www.youtube.com/embed/kbJcQYVtZMo

And this is the embed code to be used on your extra page, which makes use of the embedded player URL above:
<iframe src="https://www.youtube.com/embed/kbJcQYVtZMo" width="640" height="360" frameborder="0" allowfullscreen>
	<a href="https://www.youtube.com/watch?v=kbJcQYVtZMo">(video)</a>
</iframe>

^ Of course, "640" and "360" parts are width and height of the embeded player displaying on your extra page. The code hidden inside `<iframe>` tag (which links to the video player on YouTube) will only be shown in an unlikely case that viewer's browser is configured to disable HTML frames rendering.

And if you would really, really, like the video to play automatically (you might get shot by angry cellular internet users if you misuse this), add "?autoplay=1" to the end of embedded player URL:
https://www.youtube.com/embed/kbJcQYVtZMo?autoplay=1

Which means this embed code to use on your extra page:
<iframe src="https://www.youtube.com/embed/kbJcQYVtZMo?autoplay=1" width="640" height="360" frameborder="0" allowfullscreen>
	<a href="https://www.youtube.com/watch?v=kbJcQYVtZMo">(video)</a>
</iframe>

^ Note that "?autoplay=1" is added to the `<frame>`'s source URL, and not to the link hidden under it (as the YouTube's normal video player page already plays video automatically, and viewer already saw it coming from the URL).

When you actually use this code, don't forget to replace all of the "kbJcQYVtZMo" with the video ID of the actual YouTube video you would like to use; you know the drill.

BlueDragon:I think YouTube is fairly straightforward, since many people enable the coding for sharing. So, I clicked "share" on a video, selected "embed," copied the code, then went to my extra's page, selected "source" and pasted the code.

Well said for the specific case of YouTube; follow that one if you have trouble understanding my version.

-----

Side notes:

I think @BlueDragon suggested the HTML5 audio/video player in her first answer, because she assumed you are uploading media files to your own website, then play them on your Comic Fury extra pages. This is not an uncommon assumption for comickers.

When this is not the case, you should be more specific about it in your question (i.e. saying at least "where" you are trying to source your music/video from); the answers are very different when you do not have direct access to media files, and also very different depending on the site you try to use them from.

PSA:

@CrosEL, no offenses, but since I saw these problems repeated several times when you make this kind of thread (short, vague, semi open-ended technical questions with no background details), I would really like to ask you to read this before asking other questions that involve technicalities like this in general.

Thank you for your cooperation.
4th Aug 2019, 1:05 PM #10
CrosEL

User avatar
Posts: 846
Registration date: 9th Mar 2018
Location: America
xwindows:You need to mention which site exactly you are trying to use music from in this case.

@BlueDragon's first answer and my previous answer are only valid if you are using music from your own website (or "traditional" kind of website, generally speaking).


This means you need to make something clear first:

1. You need to distinguish between music and video. (The so-called "music" you see on YouTube are actually video; while "music" on SoundCloud or Wikimedia Commons are actually music- only sound, no picture)
2. You need to distinguish between URL of the media player page, and URL of the media file itself.

In case of YouTube (and virtually any other video/music sharing site), the URL you normally see is the player's page; the URL of media files are closely guarded and only valid temporarily, so you cannot easily reach them without having ninja skills or without using a mercenary to find them when you need them.

Directly using HTML5 audio/video needs URL of the media file, not player. If you source the video from YouTube, you won't have it. This is one of the reasons I recommend you to use YouTube's embeded player instead of using HTML5 video directly. (Other reasons are already mentioned in my earlier post)


Side notes:

I think @BlueDragon suggested the HTML5 audio/video player in her first answer, because she assumed you are uploading media files to your own website, then play them on your Comic Fury extra pages. This is not an uncommon assumption for comickers.

When this is not the case, you should be more specific about it in your question (i.e. saying at least "where" you are trying to source your music/video from); the answers are very different when you do not have direct access to media files, and also very different depending on the site you try to use them from.


For this, I'd need URL of the media itself. (I only mentioned Youtube, because I'm unsure exactly which songs could be found as just music.. And YouTube has all every song that's needed, even though I PREFER only the music itself: and not the videos.)

And, I don't have a website: everything's freshly being uploaded onto ComicFury. Again, I have no idea where I'll find the music from.. Unless Soundcloud has all of them? I didn't mean to be vague, it's just that I haven't found where to look yet, and I didn't know it was even possible to have what I was asked.


PSA:

xwindows:@CrosEL, no offenses, but since I saw these problems repeated several times when you make this kind of thread (short, vague, semi open-ended technical questions with no background details), I would really like to ask you to read this before asking other questions that involve technicalities like this in general.

Thank you for your cooperation.


The reason for this is because, in some cases, I have no idea where to start at and seriously do need help. (If I had a inkling where to go: I'd do what I wanted, as I'd have a good idea where I'm going/how to start) The other reason my stuff's vague, might veer too far from the subject, but:
I don't mean to be like that, it's just I never receive help if I explain the problem (Which DOES sound crazy, but it's true..)

Merged Doublepost:

BlueDragon:
When you say "extra site," I'm assuming you're talking about the "extra page" addition here on comic fury. If it's like a Wordpress site...I can barely handle the coding on my own website XD It functions, so...that's all I care about. I don't think I'd be equipped to help you with an actual full blown website, though :*(


Yes, the extra page thing. I have no website to upload from. Anything you say for ComicFury will help greatly.
_______________________
Me: I suck...

God: Who told thee that thou suck?


image
5th Aug 2019, 11:46 PM #11
BlueDragon

User avatar
Posts: 645
Registration date: 7th Jan 2015
Location: Missouri
^^okay, then the stuff I said was applying to that extras page. I can do screen shots when I get home if you need it. I am visiting family right now.
_______________________
6th Aug 2019, 5:00 PM #12
CrosEL

User avatar
Posts: 846
Registration date: 9th Mar 2018
Location: America
That would be great! I've been experimenting a little by myself, but nothing's come up x)
_______________________
Me: I suck...

God: Who told thee that thou suck?


image
7th Aug 2019, 4:32 PM #13
CrosEL

User avatar
Posts: 846
Registration date: 9th Mar 2018
Location: America
Bumping again to keep recent to keep reading/learning from it, ya know?
_______________________
Me: I suck...

God: Who told thee that thou suck?


image
7th Aug 2019, 11:19 PM #14
BlueDragon

User avatar
Posts: 645
Registration date: 7th Jan 2015
Location: Missouri
Okay, I just got back today. I won't have time to work on it now, but I'll try to send something before Monday (I worked while visiting family, but the drive and heavy traffic's tuckered this old dog out. I'm a dog now. Not a dragon. XD)
_______________________
8th Aug 2019, 8:28 PM #15
BlueDragon

User avatar
Posts: 645
Registration date: 7th Jan 2015
Location: Missouri
Deleted, will repost. Was in the middle of editing and hit the wrong button. Will repost properly.

Merged Doublepost:

This is all in the "Spoiler" Tag, cause of pictures.

_______________________
9th Aug 2019, 12:12 AM #16
CrosEL

User avatar
Posts: 846
Registration date: 9th Mar 2018
Location: America
BlueDragon:Deleted, will repost. Was in the middle of editing and hit the wrong button. Will repost properly.

Merged Doublepost:

This is all in the "Spoiler" Tag, cause of pictures.



Thanks for this! I'm gonna try it soon.. but does this mean I'd have to already have music files/download music? (Lol, my android got Factory Reset a few months ago: Everything I wanted here, would have to redownloaded.. I'mma little angry at this ironic circumstance..)
Thanks again, guess it's off to downloading, uploading to Soundcloud or Wordpress and copy/pasting here, then!
_______________________
Me: I suck...

God: Who told thee that thou suck?


image
9th Aug 2019, 12:56 AM #17
BlueDragon

User avatar
Posts: 645
Registration date: 7th Jan 2015
Location: Missouri
It means you need a place online to have your file uploaded. You can't upload it to Comic Fury if it's a music file (at least, as far as I can tell.)

Think of a music file as anything you'd want to share online: it's just another file type.

Just like Imgur or Photobucket lets you upload images and host them there, and YouTube lets you upload your videos, there are places that you can upload your music files and host them. If you're going to embed it on a page here, you'll have to upload it into some hosting site first. (I think I used the wrong terminology that last post--I meant to say "upload" not "download." Sorry for that!)


I googled it, and found this list for "free" music hosts--'cause I'm not about that life (paying before trialing, that is.) Look here:

SoundCloud is first on their list :3
_______________________
9th Aug 2019, 9:38 PM #18
CrosEL

User avatar
Posts: 846
Registration date: 9th Mar 2018
Location: America
Awesome! Thanks again!

I googled it, and found this list for "free" music hosts--'cause I'm not about that life (paying before trialing, that is.)


Me neither, ha! So this is great! I should have my book done soon, now!


Bumping this again, to keep it recent

Merged Doublepost:

For those who haven't unsubscribed: Sorry I keep bumping this, but I'm trying to keep it
the last thing in the "posts by this user" thing, so I can keep refering to it.
_______________________
Me: I suck...

God: Who told thee that thou suck?


image
13 days ago, 7:07 PM #19
CrosEL

User avatar
Posts: 846
Registration date: 9th Mar 2018
Location: America
Rebumping, I really need to stop making comments in the forum, so this will stay at the top of the list...
_______________________
Me: I suck...

God: Who told thee that thou suck?


image
13 days ago, 9:50 PM #20
BlueDragon

User avatar
Posts: 645
Registration date: 7th Jan 2015
Location: Missouri
You could bookmark it, or alternatively, you could open it from the forum when you see the update. That way it won't register with your list, but you can see see what's written :3
_______________________
Forum > Layouts, HTML, CSS & Javascript > Videos/Music in your Extra Website page(s)?
Pages: [1] [2]