HELP: webamp and iframe help

[Memory]

so im trying to have a little box that contains a webamp in it like this : https://codepen.io/anonymousredfox/pen/dywNoXM

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?

[TheNothingMonster]

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!

[Memory]

thank you! it worked

[Memory]

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?

[TheNothingMonster]

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. ^^

[Memory]

thanks ^^