Embeded YouTube Question (Java/Scripting)

69 views Asked by At

First post here so let me know if something is done the wrong way, however.

I've never taken into account what it would actually take to do this, but to make a long story short, There's a section of my website that I'm creating for Class Work that I want to resemble "Rainymood.com"

RainyMood is a website in which there is a looping 30m audio file (which I have already) as well as "Daily Song Picks" that can play simultaneously with the rain ambiance to create peaceful sounds by simply attaching the youtube video you have in mind to the end of the URL

For example, changing "https://RainyMood.com" to "https://rainymood.com/watch?v=ZBrT97qJ-3w" changes the source of the embedded youtube video to play Sasuke's Theme from the Naruto OST

I've looked around for how to do this but I haven't found what I was looking for. I have a basic understanding of Javascript but I'm not sure where to even begin with this one.

1

There are 1 answers

2
itsanewabstract On

You can make a simple copy that's functionally similar to the one used on rainymood.com with just a few lines of HTML. All you need is an audio tag, source tag, and an iframe tag. Put your audio source in the source tag as shown, and place your embedded Youtube link in the iframe as shown.

Here's the code:

<!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  </head>
  <body>
    <audio controls loop>
       <source src="https://rainymood.com/audio1112/0.m4a" type="audio/mp4" />
    </audio>

    <iframe src="https://www.youtube.com/embed/ZBrT97qJ-3w" allowfullscreen="">. 
    </iframe>
</body>
</html>

If you want to make your own audio player using Javascript, then take a look at this tutorial. Although it's for making a video player, the same concepts apply to controlling audio as well.