PLAY AUDIO FILES USING HTML5

Sometimes you want to embed a video from youtube.com into your site to listen to some great music but unfortunately that is not allowed.
At this point we can download the video (MP4) or audio component (MP3) and use the HTML5 "audio" element to hear them.
It is not hard to find on the internet tutorials on that.
In this post I would like to share the site that I have made.

1- Make "index.html" or download zip file

First of all you need to copy the source code of the site "index.html" and create your html file.
Then make a new folder named as "play-audio-continuosly" and put "index.html" there.
However, the "index.html" file also has an audio player so I attached it with 7 MP3 files and there is one "bannerHo-guom.jpg" background image. So if you want to have them, you can download the file "play-audio-continuously.zip" (27.5 MB) from here:

https://www.mediafire.com/file/q3gjv90z69w29mz/play-audio-continuously.zip

2- Add some more MP3 to the audio play list

- Copy URL of the youtube page, for example "https://www.youtube.com/watch?v=8h10QwxBT7o"
- Open the page "http://save-video.com/" and paste here the URL.

Click "Download"

- Click "MP3"
- ... (continue the following steps)

You finally downloaded the file:
"Till - Instrumental Cover.mp3"

Open the folder "Download", copy (or cut) this file and paste it to the folder "play-audio-continuously".
Now you can easily add HTML code lines like this in beetween the tags <ul id="playlist" ...> and </ul> in the file "index.html"

3- Watch the web page "index.html"

When you open this page, the audio list is shuffled, and the first audio in the playlist is automatically played.
If the sounds are small, increase them: for example, increase the volume from 0.20 to 0.50
Please fix the "index.html" file, find:
function init_A ()
................
Replace audio[0].volume = .20; with audio[0].volume = .50;

Any time you can click the "Shuffle" button to change the order of tracks in the list

SOURCE CODE index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title>play audio continuously</title>
  <script src="jquery_1.8.3_jquery.min.js"></script>
<style>
body{
margin:0px; padding:0px;
font-family:Arial;
font-size:10pt;
background-color:#99CC66; 
}
button{
background-color:#CCCCCC;
cursor:pointer;
}  

#playlist,audio{background:#363;width:315px;padding:0px;}

.active a{color:#99FFFF;text-decoration:none;}  

li{padding:0px;width:265px}
li a{color:#eeeedd;background:#363;padding:0px;display:block;text-decoration:none;}
li a:hover{color:#5DB0E6}

ul{
list-style-type: none;
text-align:left; background:#333;width:265px;
}

#table1 td{ 
border:1px solid gray;
}
</style>
</head>

<body>
<div align="center">
<table border-collapse:collapse; border"0" style="width:1000px;height:80px;"><tr>
<td style="width:675px; overflow-x: hidden;
    overflow-y: hidden;background-color:#336633;vertical-align:top;text-align:center">
  
<img style="width:675px;left:0px;top:0px" alt="ho guom lac"
    src="bannerHo-guom.jpg">
    
<table style="width:675px;font-size:16pt;color:white">
<tr><td style="text-align:center;padding-top:6px;">
<b style="font-family:'Times'"><i>Merry Christmas & Happy New Year 2018!</i></b>
</td><td style="width:70px;text-align:right;padding-top:10px;">
<button onclick="shuffle(arr)">Shuffle</button>
</td></tr>
</table>
 
</td><td style="width:315px">
  
  <audio id="audio" preload="auto" tabindex="0" controls="" >
  <source src="Moscow Nights - keyboard Tyros (chromatic) by Paul.mp3">
  Your Fallback goes here
  </audio>

<div style="width:315px;height:80px; overflow-x: hidden;overflow-y: auto;padding:0px;margin:0px; background:#363;">

<ul id="playlist" style="padding:10px;width:265px;font-size:9pt;">
        <li>
            <a href="HAPPY NEW YEAR - ABBA (PIANO Lyrics on screen).mp3">
            HAPPY NEW YEAR
            </a>
        </li>
        <li>
            <a href="HOW CAN I TELL HER - PIANO COVER.mp3">
            HOW CAN I TELL HER
            </a>
        </li>
        <li>
            <a href="TRAUMERIE (REVERIE) - PIANO SOLO.mp3">
            TRAUMERIE (REVERIE)
            </a>
        </li>
        <li>
            <a href="How to play piano BESAME MUCHO - Slow tempo.mp3">
            BESAME MUCHO - Slow tempo
            </a>
        </li>
        <li>
            <a href="Moscow Nights - keyboard Tyros (chromatic) by Paul.mp3">
            Moscow Nights.mp3
            </a>
        </li>
        <li>
            <a href="Spanish Eyes - Organ keyboard Tyros (chromatic) by Paul.mp3">
                Spanish Eyes
            </a>
        </li>
        <li>
            <a href="La playa - keyboard Tyros (chromatic) by Paul.mp3">
                La playa
            </a>
        </li>
        <li>
            <a href="Cuando Calienta El Sol Helmut Lotti Yamaha Tyros 5 Roland G70 By Rico.mp3">
                Cuando Calienta El Sol
            </a>
        </li>
        <li>
            <a href="La Comparsa - keyboard Tyros (chromatic) by Paul(1).mp3">
                La Comparsa
            </a>
        </li>
        <li>
            <a href="Bésame Mucho - keyboard Tyros (chromatic) by Paul.mp3">
                Bésame Mucho
            </a>
        </li>
        <li>
            <a href="Orchestra Joe Loss - Delilah (Instrumental) (World-Hit) (Ballroom Dancing) (EMI).mp3">
                Delilah (Instrumental)
            </a>
        </li>
    </ul>
    </div>
</td></tr>
</table>
<br>
<iframe id="ifr1" style="width:834px;background-color:width;height:450px" src="html5-audio.html">
</iframe>
<br><br>  

<div style="width:1000px;height:26px; background-color:#336633;color:white;padding-top:6px">
<b><i>Return to my blog (http://phanhung20.blogspot.com/)</i></b>&nbsp;&nbsp;
<button onclick="window.location = 'http://phanhung20.blogspot.com';">OK</button>
</div>
</div>   <!-- center -->
<script>

  function run(link, player){
      player.src = link.attr('href');
      par = link.parent();
      par.addClass('active').siblings().removeClass('active');
      player.load();
      player.play();
  }

  function shuffle(array) {
      for (var i = array.length - 1; i > 0; i--) {
          var j = Math.floor(Math.random() * (i + 1));
          var temp = array[i];
          array[i] = array[j];
          array[j] = temp;
      }
      st = '';
      for(i=0; i<array.length; i++){
          st += '<li><a href="' + url[array[i]] + '">' ;
          st +=  tit[array[i]] + '</a></li>';
      }
      $('#playlist').html(st);
      $('#playlist li:first').find('a').click();
  }
 
  arr = [];  tit = [];  url = [] ;
  
  function initAudio(){
      liLength = $('#playlist li').length;
      $('#playlist li').each(function(idx, ele){
          arr.push(idx);
          tt = $(ele).find('a').html();
          uu = $(ele).find('a').attr('href');
          tit.push(tt);
          url.push(uu);
      })
      shuffle(arr);
      $('#playlist li:first').find('a').click();
  }
   
  function init(){
      $('#area1').val('');
      var current = 0;
      var audio = $('#audio');
      var playlist = $('#playlist');
      var tracks = playlist.find('li a');
      var len = tracks.length - 1;
      audio[0].volume = .20;
      playlist.on('click','a', function(e){
          e.preventDefault();
          link = $(this);
          current = link.parent().index();
          run(link, audio[0]);
      });
      audio[0].addEventListener('ended',function(e){
          current++;
          if(current == len){
              current = 0;
              link = playlist.find('a')[0];
          }else{
              link = playlist.find('a')[current];    
          }
          run($(link),audio[0]);
      });
      initAudio();
  }
    
  $(document).ready(function () {
      init();
  });

</script>
  </body>
</html>

4- Use CSS to add animated gifs to web pages.
On the net I saw a beautiful animated gif about fireworks and wanted to use it as a banner. Banner should have the size: width: 675px; height: 85px; So the gif is too big, in addition to the bottom of the gif is seen the word "2017" that need to be hidden. Unlike normal images, animated gifs are difficult to be cropped using graphics sofwears

To solve the above difficulties, I did the as the following:
Set for the gif the following style:
style = "position: absolute; clip: rect (114px, 677px, 200px, 0)".
Notice the rect parameters are written in clock wise direction (top, right, bottom, left). You have to try many times to get your best banner.
Then a small narrow image with the size 675px-85px is created.

Next you have to move the banner to the top of the page. Put this small image into a division and let them move to the right location:

<div id = "container" style = "position: relative; top: -112px; left: -498px; z-index: 200;"> <img id = "clip" src = "https://i.pinimg.com/originals/c0/8e/7c/c08e7cdca7299c0285ad4d79a4835a08.gif.gif" style = "position: absolute; clip: rect (114px, 677px, 200px, 0)">
</div>

I also created another banner from a aquarium jpg photo (with style = "z-index: 100").
GIF animation and aquarium image are interchangeable each time the "Shuffle" button is clicked.
===========================================================

In the source code of "index.html" You need to make the following additions:

1. In the <style> add:
#container {
position: relative;
top:-112px;
left:-498px;
z-index:200;
}
#clip {
position: absolute;
clip: rect( 114px, 677px, 200px, 0);
/* clip: rect(top, right, bottom, left) */
}
#container2 {
position: relative;
top:-189px;
left:-550px;
z-index:100;
}
#clip2 {
position: absolute;
clip: rect( 192px, 728px, 277px, 52);
/* clip: rect(top, right, bottom, left) */
}

2. In the <body>, just below the first line <div align = "center"> add:
<div id="container">
<img id="clip" src="https://i.pinimg.com/originals/c0/8e/7c/c08e7cdca7299c0285ad4d79a4835a08.gif"> </div> <div id="container2"> <img id="clip2" src="http://aquariumprosmn.com/wp-content/uploads/2010/04/image_fishhealth.jpg"> </div>

3. Finally in the <script>, find the function "function shuffle(array)" and add:

count = 0;
function shuffle(array) {
if(count%2 == 0){
$('#container').show(); $('#container2').hide();
}else{
$('#container').hide(); $('#container2').show();
} count++;
...
...
}

NOTE:
- We used "hot link" to 2 images of other websites. This should not be. It is better to copy gif and jpg to your PC.
- If you use CSS crop then the cropped images will be well placed only when using the same browser to watch the page. I've used the browser "Firefox" to build this page. So don't use, for example "Ms IExplorer" to watch it.

JAVASSCRIPT ON IPAD (to see the list click ← then click ≡ and ⌄)

PLAY AUDIO FILES USING HTML5

Popular posts from this blog

PHP JQUERY PROXY DEMO

SEARCH FOR PIXABAY PHOTOS

DOWNLOAD pixab-15.html