mitch
/
mixtape-maker


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
							<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>mixtape recorder prototype</title>
  <link rel="stylesheet" href="./style.css">

  <!-- Open Graph Meta Tags -->
  <meta property="og:title" content="Mixtape Recorder">
  <meta property="og:description" content="Create your own mixtapes with this nostalgic mixtape recorder prototype.">
  <meta property="og:image" content="thumbnail.jpg">
  <meta property="og:url" content="https://donaberger.xyz/projects/mixtape/">
  <meta property="og:type" content="website">

  <!-- Twitter Card Meta Tags -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="Mixtape Recorder">
  <meta name="twitter:description" content="Create your own mixtapes with this nostalgic mixtape recorder prototype.">
  <meta name="twitter:image" content="thumbnail.jpg">

  <!-- Additional Meta Tags -->
  <meta name="description" content="A prototype for a mixtape recorder that allows you to record your own mixtapes to a reel-to-reel tape.">
  <meta name="keywords" content="mixtape, recorder, prototype, reel-to-reel, nostalgic, music">
  <meta name="author" content="Mitch Donaberger, January 2025">
</head>
<body>
<!-- partial:index.partial.html -->
<body>
    <div class="container">
        <h1>Mixtape Recorder</h1>

        <div class="reel-animation">
            <br/>
            <img src="reel-to-reel-static.svg" alt="reel-spinner" class="reel-spinner" style="position: relative; left: 0rem;" />
            <br/><br/>
        </div>

        <div class="controls">
            MP3: <input type="file" id="mp3Files" multiple accept=".mp3" class="file-input"><br/>
            Tape Length:<input type="number" id="tapeLength" placeholder="Tape Length (minutes)" class="tape-input"><br/>
            Silence Gap:<input type="number" id="trackGap" placeholder="Seconds between tracks" class="tape-input" value="2" min="0" step="0.5">
        </div>

        <div id="playlist" class="playlist">
            <h2>Playlist</h2>
            <ul id="trackList" class="track-list" ondragover="event.preventDefault()">
                <!-- tracks will be added here -->
            </ul>
        </div>

        <div class="info">
            <p>Total Duration: <span id="totalDuration">0</span> minutes</p>
            <p>Remaining Time: <span id="remainingTime">0</span> minutes</p>
        </div>

        <button id="recordButton" class="record-button">Record to Tape</button>
        <div id="progress" class="progress"></div>
        

        <div class="faq">
            <H1>FAQ.</H1>
            <p class="faq-question">Q: What is this?</p>
            <p class="faq-answer">A: This is a prototype for a mixtape recorder. It allows you to record your own mixtapes to a reel-to-reel tape, like a Walkman.</p>

            <p class="faq-question">Q: How does it work?</p>
            <p class="faq-answer">A: You can upload your own MP3 files, as well as set the length of the tape and the gap between tracks. You can also drag and drop the tracks to sort the playlist before recording.</p>

            <p class="faq-question">Q: Does any of my data get saved?</p>
            <p class="faq-answer">A: No, all of your data is stored in your browser and is not saved anywhere on our servers.</p>

            <p class="faq-question">Q: But... why?</p>
            <p class="faq-answer">A: I have a fond memory of making my own mixtapes on a Walkman. I figured there has to be a way to build tapes using MP3s. I just wanted to make something fun and nostalgic, so, I hope this fits the bill.</p>

        </div>
    </div>

    <script src="script.js"></script>
</body>
<!-- partial -->
  <script  src="./script.js"></script>

</body>
</html>