Announcement

Collapse
No announcement yet.

HTML Loop Player

Collapse
X
Collapse
 
  • Page of 1
  • Filter
  • Time
  • Show
Clear All
new posts
Previous template Next
  • #1

    HTML Loop Player

    Before I start, I would like to say that I cannot write html code. So if you can write code, please do not laugh.
    I have been trying to create code for an html page that I can open in my browser and play multiple loops from the same html page.
    I can do this using multiple vlc players but I wanted a gui whereby I could see all of the loops together.
    Anyway, I think I may have created a (dirty) file that can do what I want......and I wanted to share it.

    Here is a screenshot of what it looks like in my Firefox browser
    I will post the code below

    Attached Files
    Tags: None
  • #2
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=windows-1252"/>
    <title></title>
    <meta name="generator" content="LibreOffice 5.3.4.2 (Windows)"/>
    <meta name="created" content="00:00:00"/>
    <meta name="changed" content="2018-04-11T19:43:35.388000000"/>
    </head>
    <body lang="en-US" dir="ltr">
    <h1>Track 1</h1>
    <p><strong>Loop 1</strong></p>
    <p> </p>
    <audio controls>
    <source src="Loop1 - VH20180406_232607.flac" type="audio/flac">
    <source src="Loop1 - VH20180406_232607.ogg" type="audio/ogg">
    <p>Your browser doesn't support HTML5 audio. Here is a <a href="viper.mp3">link to the audio</a> instead.</p>
    </audio>

    <p> </p>
    <p><strong>Loop 1 - Info</strong> - Any information placed here</p>

    <p><strong>Loop 2</p>
    <audio controls>
    <source src="Loop2 - VH20180406_234615.flac" type="audio/flac">
    <source src="Loop2 - VH20180406_234615.ogg" type="audio/ogg">
    <p>Your browser doesn't support HTML5 audio. Here is a <a href="viper.mp3">link to the audio</a> instead.</p>
    </audio>

    <p> </p>
    <p><strong>Loop 2 - Info</strong> - Any information placed here</p>

    <p><strong>Loop 3</p>
    <audio controls>
    <source src="Loop3 - VH20180406_235649.flac" type="audio/flac">
    <source src="Loop3 - VH20180406_235649.ogg" type="audio/ogg">
    <p>Your browser doesn't support HTML5 audio. Here is a <a href="viper.mp3">link to the audio</a> instead.</p>
    </audio>
    <p> </p>

    <p><strong>Loop 3 - Info</strong> - Any information placed here</p>

    <p><strong>Loop 4</p>
    <audio controls>
    <source src="Loop4 - VH20180407_000330.flac" type="audio/flac">
    <source src="Loop4 - VH20180407_000330.ogg" type="audio/ogg">
    <p>Your browser doesn't support HTML5 audio. Here is a <a href="viper.mp3">link to the audio</a> instead.</p>
    </audio>
    <p> </p>
    <p><strong>Loop 4 - Info</strong> - Any information placed here</p>







    </audio>

    </body>
    </html>

    Comment

    • #3
      In the above code there are 4 flac loops.

      Loop1 - VH20180406_232607.flac
      Loop2 - VH20180406_234615.flac
      Loop3 - VH20180406_235649.flac
      Loop4 - VH20180407_000330.flac

      Each loop is in the same folder as the html file.

      When you open the html file you can stop and start any loop at any time.
      You can adjust the volume of individual loops.
      If you right click on any player you can adjust the playback speed of each file.
      If you right click on any player you can loop each file.

      Please note, I did not write this code. I just cut and pasted it from a website and edited it until I got what I wanted.
      I have no idea how it plays in various browsers.
      Also I am sure that the code could be complied better than this.

      However, I just wanted to share this in case other may find it of interest or they may want to improve on it.

      Yours
      David Rogers

      P.s. if you are unsure how to compile the page

      Open Notepad - Paste the code
      Click File - Save As
      In the Save As box choose Save as Type - All Files
      Name the File name - XXXX.html
      Click save

      Comment

      • #4
        Okay I have been working to change to format so that the loop players appear in boxes.
        Here is a copy of the html file which works as the loop player.
        Place the html file in the folder with the loops.

        Either:

        1 - open the html file and rename Loop1.flac and Loop1.ogg to the name of the loops that you will be using or
        2 - rename the loops in your folder to Loop1.flac, Loop2.flac, Loop3.flac etc (this is assuming that you are using flac files. If you are using wav files then change to name in the html file.

        You may notice that I have written notes under certain loops to tell me what is on that loop.

        Once again, please remember that I cannot write html code, so I am just messing about cutting and pasting until I can get something that looks like what I am after.
        If you can write code and offer better solutions, please feel free to help

        Yours
        David Rogers

        P.s The html file is in a zip file as I was not allowed to upload am html file

        Attached Files

        Comment

        • #5
          Here is a screenshot of how the player looks now with boxes

          David

          P.s Below I will post the code I used for a 10 box player
          Attached Files
          Last edited by drling0; 04-12-2018, 01:20 AM.

          Comment

          • #6
            <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
            <html><head>
            <meta http-equiv="content-type" content="text/html; charset=windows-1252">
            <title></title>
            <meta name="generator" content="LibreOffice 5.3.4.2 (Windows)">
            <meta name="created" content="00:00:00">
            <meta name="changed" content="2018-04-11T19:43:35.388000000">
            </head>
            <body dir="ltr" lang="en-US">
            <h1>Track 1</h1>
            <p> </p>

            <table width="100%" cellspacing="0" cellpadding="4">
            <colgroup><col width="128*">
            <col width="128*">
            </colgroup><tbody><tr valign="top">
            <td style="border-top: 1px solid #000000; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: none; padding-top: 0.04in; padding-bottom: 0.04in; padding-left: 0.04in; padding-right: 0in" width="50%">


            <h1>Track 1 - Loop 1</h1>
            <audio controls="controls">
            <source src="Loop1.flac" type="audio/flac">
            <source src="Loop1.ogv" type="audio/ogg">
            </audio>
            <p><strong>Loop 1 - Info</strong> - Any information placed here</p>

            </td>
            <td style="border: 1px solid #000000; padding: 0.04in" width="50%">


            <h1>Track 1 - Loop 2</h1>
            <audio controls="controls">
            <source src="Loop2.flac" type="audio/flac">
            <source src="Loop2.ogv" type="audio/ogg">
            </audio>
            <p><strong>Loop 2 - Info</strong> - Any information placed here</p>
            <p> </p>


            </td>
            <td style="border-top: none; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: none; padding-top: 0in; padding-bottom: 0.04in; padding-left: 0.04in; padding-right: 0in" width="50%">

            </td>
            </tr>
            <tr valign="top">
            <td style="border-top: none; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: none; padding-top: 0in; padding-bottom: 0.04in; padding-left: 0.04in; padding-right: 0in" width="50%">



            <h1>Track 1 - Loop 3</h1>
            <audio controls="controls" loop="">
            <source src="Loop3.flac" type="audio/flac">
            <source src="Loop3.ogv" type="audio/ogg">
            </audio>
            <p><strong>Loop 3 - Info</strong> - Any information placed here</p>
            <p> </p>
            </td>
            <td style="border-top: none; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000; padding-top: 0in; padding-bottom: 0.04in; padding-left: 0.04in; padding-right: 0.04in" width="50%">


            <h1>Track 1 - Loop 4</h1>
            <audio controls="controls">
            <source src="Loop4.flac" type="audio/flac">
            <source src="Loop4.ogv" type="audio/ogg">
            </audio>
            <p><strong>Loop 4 - Info</strong> - Any information placed here</p>
            <p> </p>
            </td>
            <td style="border-top: none; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: none; padding-top: 0in; padding-bottom: 0.04in; padding-left: 0.04in; padding-right: 0in" width="50%">

            </td>
            </tr>
            <tr valign="top">
            <td style="border-top: none; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: none; padding-top: 0in; padding-bottom: 0.04in; padding-left: 0.04in; padding-right: 0in" width="50%">



            <h1>Track 1 - Loop 5</h1>
            <audio controls="controls">
            <source src="Loop5.flac" type="audio/flac">
            <source src="Loop5.ogv" type="audio/ogg">
            </audio>
            <p><strong>Loop 5 - Speech 1</strong>
            </p><p> </p>
            </td>
            <td style="border-top: none; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000; padding-top: 0in; padding-bottom: 0.04in; padding-left: 0.04in; padding-right: 0.04in" width="50%">


            <h1>Track 1 - Loop 6</h1>
            <audio controls="controls">
            <source src="Loop6.flac" type="audio/flac">
            <source src="Loop6.ogv" type="audio/ogg">
            </audio>
            <p><strong>Loop 6 - Speech 2</strong>
            </p><p> </p>
            </td>
            </tr>
            <tr valign="top">
            <td style="border-top: none; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: none; padding-top: 0in; padding-bottom: 0.04in; padding-left: 0.04in; padding-right: 0in" width="50%">


            <h1>Track 1 - Loop 7</h1>
            <audio controls="controls">
            <source src="Loop7.flac" type="audio/flac">
            <source src="Loop7.ogv" type="audio/ogg">
            </audio>
            <p><strong>Loop 7 - Drums</strong>

            </p><p><br>

            </p>
            </td>
            <td style="border-top: none; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000; padding-top: 0in; padding-bottom: 0.04in; padding-left: 0.04in; padding-right: 0.04in" width="50%">


            <h1>Track 1 - Loop 8</h1>
            <audio controls="controls">
            <source src="Loop8.flac" type="audio/flac">
            <source src="Loop8.ogv" type="audio/ogg">
            </audio>
            <p><strong>Loop 8 - Info</strong> - Any information placed here</p>
            <p><br>

            </p>
            </td>
            </tr>
            <tr valign="top">
            <td style="border-top: none; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: none; padding-top: 0in; padding-bottom: 0.04in; padding-left: 0.04in; padding-right: 0in" width="50%">


            <h1>Track 1 - Loop 9</h1>
            <audio controls="controls">
            <source src="Loop9.flac" type="audio/flac">
            <source src="Loop9.ogv" type="audio/ogg">
            </audio>
            <p><strong>Loop 9 - Info</strong> - Any information placed here</p>
            <p><br>

            </p>
            </td>
            <td style="border-top: none; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000; padding-top: 0in; padding-bottom: 0.04in; padding-left: 0.04in; padding-right: 0.04in" width="50%">


            <h1>Track 1 - Loop 10</h1>
            <audio controls="controls">
            <source src="Loop10.flac" type="audio/flac">
            <source src="Loop10.ogv" type="audio/ogg">
            </audio>
            <p><strong>Loop 10 - Info</strong> - Any information placed here</p>

            </td><td style="border: 1px solid #000000; padding: 0.04in" width="50%">

            <p><br>

            </p>
            </td>
            </tr>
            </tbody></table>
            <p><br>
            <br>

            </p>


            </body></html>
            Last edited by drling0; 04-12-2018, 04:48 PM.
            • 2 likes

            Comment

            • #7
              I recorded a track using the loop player with 9 loops.
              Here is the result:

              https://pinkmonkeys.bandcamp.com/album/for-bob-calvert




              Last edited by drling0; 04-14-2018, 04:41 AM.
              • 2 likes

              Comment

              • #8
                Here is a live performance (no overdubs) using the loop player



                Comment

                Previous template Next
                Working...
                X