How to add a Music Visualisation to header

Forums » WordPress » Mantra » How To

  • Author
    Posts
  • December 26th, 2020 at 14:45 #102589
    DJ-Daz

    I have what seems to be a perfect visualiser for for the small header on the Mantra theme. Nice theme by the way.

    <html>
  <head>
    <title>SimpleAudioVisualizer</title>
    <style type='text/css'>
      html {
        height: 100%;
      }
      body {
        overflow: hidden;
        width: 100%;
        height: 100%;
        background: #555;
        margin: 0;
      }
      canvas {
        position: absolute;
        top: 0;
        left: 0;
      }
      div.bg {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
      }
      div#bgimage {
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
      }
      div#debug {
        font-family: Arial, Helvetica, sans-serif;
        color: white;
        position: absolute;
        top: 2rem;
        left: 2rem;
        z-index: 999;
      }
      div#debug > h1 {
        padding: 1rem;
      }
    </style>
  </head>
  <body>
    <div id='bgcolor' class='bg'></div>
    <div id='bgimage' class='bg'></div>
    <canvas id='canvas'></canvas>
    <!-- div id='debug'>
      <h1 id='debug1'></h1>
      <h1 id='debug2'></h1>
    </div -->
    http://'wallpaper.js'
  </body>

    How do I get the visualiser to show in the header? Preferably above the header image/logo?
    Many thanks,
    Daz

    Website: daz-dj.ddns.net

  • Author
    Posts
Viewing 1 post (of 1 total)

The topic ‘How to add a Music Visualisation to header’ is closed to new replies.