HELP: webamp and iframe help

MariBelle2002
Casual Poster

she/her

HELP: webamp and iframe help

« on: September 07, 2023 @191.76 »

so im trying to have a little box that contains a webamp in it like this :

View the Code on Codepen.io

id like it to stay in a small area like it is there

but i dont know how to just embed the webamp into said area. im not sure how i would take a little piece of my html page to embed in a box-
does anyone know how i could do that?


	Logged

TheNothingMonster
Full Member ⚓︎

Hey psst! Wanna see something spooky?

StatusCafe: thenothingmonster

Re: HELP: webamp and iframe help

« Reply #1 on: September 07, 2023 @434.75 »

You just have to make a new HTML page containing only your Webamp and link that page into the iframe you want!

So, create a new HTML page with only your webamp included. Let's name it "webamp_player_frame.html" for the sake of this example.
Your new webamp page should look something along these lines (I referenced dokodemo's webamp guide for the scripts):

Code

<!DOCTYPE html>
<html>
  <head>
    <title>Webamp Player Frame</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://unpkg.com/webamp@1.4.0/built/webamp.bundle.min.js"></script>
  </head>
  <body>
    <div style="width:40px; height:40px; position:absolute; bottom:0px; left:0px;">
      <div id="winamp-container"></div>
      <script>
        const Winamp = window.Webamp;
        // All configuration options are optional.
        const webamp = new Webamp({
          // Optional.
          initialTracks: [
            {
              metaData: {
                artist: "Artist",
                title: "Title",
              },
              url: "URL TO SONG .mp3",
            },
            {
              metaData: {
                artist: "Artist",
                title: "Title",
              },
              url: "URL TO SONG .mp3",
            },
            {
              metaData: {
                artist: "Artist",
                title: "Title",
              },
              url: "URL TO SONG .mp3",
            },
          ],
          initialSkin: {
            url: "URL TO SKIN .WSZ"
          },
        });
        webamp.renderWhenReady(document.getElementById('winamp-container'));
      </script>
    </div>
  </body>
</html>

And to link your webamp, just insert an iframe sourcing the new webamp page (webamp_player_frame.html) in the page you want for the webamp to appear! (I hope that made sense.)

Code

<iframe src="webamp_player_frame.html" height="348" width="275" title="Webamp Player"></iframe>

The iframe will link your webamp player within its box according to its src attribute. You may have to tweak the width/height settings a bit, as well as the path to the webamp's page inside the iframe. Other than that, it should work just fine.

Of course, you can customise anything you want. Feel free to take these snippets as a base and build along.

If something did not work out for you, you can always ask!


	Logged

~~~~~~

MariBelle2002
Casual Poster

she/her

Re: HELP: webamp and iframe help

« Reply #2 on: September 07, 2023 @951.10 »

thank you! it worked


	Logged

MariBelle2002
Casual Poster

she/her

Re: HELP: webamp and iframe help

« Reply #3 on: September 08, 2023 @653.25 »

Quote from: TheNothingMonster on September 07, 2023 @434.75

You just have to make a new HTML page containing only your Webamp and link that page into the iframe you want!

So, create a new HTML page with only your webamp included. Let's name it "webamp_player_frame.html" for the sake of this example.
Your new webamp page should look something along these lines (I referenced dokodemo's webamp guide for the scripts):
Code
<!DOCTYPE html>
<html>
  <head>
    <title>Webamp Player Frame</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://unpkg.com/webamp@1.4.0/built/webamp.bundle.min.js"></script>
  </head>
  <body>
    <div style="width:40px; height:40px; position:absolute; bottom:0px; left:0px;">
      <div id="winamp-container"></div>
      <script>
        const Winamp = window.Webamp;
        // All configuration options are optional.
        const webamp = new Webamp({
          // Optional.
          initialTracks: [
            {
              metaData: {
                artist: "Artist",
                title: "Title",
              },
              url: "URL TO SONG .mp3",
            },
            {
              metaData: {
                artist: "Artist",
                title: "Title",
              },
              url: "URL TO SONG .mp3",
            },
            {
              metaData: {
                artist: "Artist",
                title: "Title",
              },
              url: "URL TO SONG .mp3",
            },
          ],
          initialSkin: {
            url: "URL TO SKIN .WSZ"
          },
        });
        webamp.renderWhenReady(document.getElementById('winamp-container'));
      </script>
    </div>
  </body>
</html>
And to link your webamp, just insert an iframe sourcing the new webamp page (webamp_player_frame.html) in the page you want for the webamp to appear! (I hope that made sense.)
Code
<iframe src="webamp_player_frame.html" height="348" width="275" title="Webamp Player"></iframe>
The iframe will link your webamp player within its box according to its src attribute. You may have to tweak the width/height settings a bit, as well as the path to the webamp's page inside the iframe. Other than that, it should work just fine.

Of course, you can customise anything you want. Feel free to take these snippets as a base and build along.
If something did not work out for you, you can always ask!

there is one thing i noticed that i have a question about :

the scrollbars on the right and bottom of the iframe. is there a way to make it so these cant be seen?


	Logged

TheNothingMonster
Full Member ⚓︎

Hey psst! Wanna see something spooky?

StatusCafe: thenothingmonster

Re: HELP: webamp and iframe help

« Reply #4 on: September 08, 2023 @688.31 »

Quote from: MariBelle2002 on September 08, 2023 @653.25

is there a way to make it so these cant be seen?

Yes, just adjust the iframe's width and height properties (numbers) so that the box has more space to show the webamp.

<iframe src="webamp_player_frame.html" height="348" width="275" title="Webamp Player"></iframe> <-- these numbers I marked with underlining. Just increase them by a bit until there are no more scrollbars. ^^