// 無料で電話かけ放題

document.oncontextmenu = function () {return false;}

  var buttons = [
    1,2,3,4,5,6,7,8,9,'＊',0,'#','','Tell','',
  ];
  var buttons2 = [
    'Close', 'Tell',
  ];
  var telNumber = '';
  var div = document.getElementById('demo');
  var ul = document.createElement('ul');
  ul.classList.add('send');
  div.appendChild(ul);
  var iframe = document.createElement('iframe');
  div.appendChild(iframe);

$(function(){

  buttons.forEach(function(v){
    let li = document.createElement('li');
    let a = document.createElement('a');
    let s = document.createElement('span');
    a.appendChild(s);
    li.appendChild(a);
    ul.appendChild(li);
    s.textContent = v;
    let label = v;
    a.id = 'id' + label;
    if(label === '＊'){label = 'Star';}
    if(label === '#'){label = 'Hash';}
    if(label === ''){li.classList.add('null')}
    if(label === 'Tell'){
      s.textContent = '';
      li.classList.add('handset');
      let img = document.createElement('img');
      img.src = 'tell.svg';
      s.appendChild(img);
    }
    a.addEventListener('click', function(){
      let src = `mp3/Telephone-DTMF01-${label}.mp3`;
      if(label === 'Tell'){
        src = 'mp3/Telephone-Signal_Tone02-1(Ringback).mp3';
        receiveEvent();
      }
      const m = new Audio(src);
      m.play();
      telNumber += label;
      //iframe.src = src;
    });
  });
  var cushion = new Audio('mp3/Cell_Phone-Vibration01-1(Cushion).mp3');
  var receiveEvent = function(){
    console.log(telNumber);

    if(Math.random()*9>2 && telNumber.length > 8){
      setTimeout(function(){
        const m = new Audio('mp3/rusuden_tone2.mp3');
        m.play();
      }, 10*1000);
    } else {
      setTimeout(function(){
        cushion.play();
        div.classList.add('receive');
      }, 15*1000);
      setTimeout(function(){
        div.classList.remove('receive');
      }, 30*1000);
    }
    telNumber = '';
  }


  var ul2 = document.createElement('ul');
  ul2.classList.add('receive');
  div.appendChild(ul2);


  buttons2.forEach(function(v){
    let li = document.createElement('li');
    let a = document.createElement('a');
    let s = document.createElement('span');
    a.appendChild(s);
    li.appendChild(a);
    ul2.appendChild(li);
    s.textContent = v;
    let label = v;
    if(label === 'Tell'){
      s.textContent = '';
      li.classList.add('handset');
      let img = document.createElement('img');
      img.src = 'tell.svg';
      s.appendChild(img);
    }
    if(label === 'Close'){
      s.textContent = '';
      li.classList.add('close');
      let img = document.createElement('img');
      img.src = 'tell.svg';
      s.appendChild(img);
    }

    a.addEventListener('click', function(){
      cushion.pause();
      cushion.currentTime = 0;
      if(label === 'Tell'){
        const m = new Audio('mp3/tell-voice-not-use.mp3');
        m.play();
      }
      if(label === 'Close'){
        const m = new Audio('mp3/Telephone-Signal_Tone02-5(Dial).mp3');
        m.play();
      }
    });

  });


});
$(function(){

  var keys = [48,49,50,51,52,53,54,55,56,57,58];//0-9
  //var keyNums = [0,1,2,3,4,5,6,7,8,9];//0-9
  $(document).on('keydown', function(e){
    keys.forEach(function(k, i){
      if(e.keyCode === k){
        //e.preventDefault();
      }
    });
    var addNum = 1;
    if(event.ctrlKey){
      addNum = -1;
    }
    let label = String.fromCharCode(e.keyCode);
    //console.log(e.keyCode);
    console.log(label);
    if(!label.match(/[0-9]|Star|Hash/)){return;}
    //$('#id'+ label).css({border:'1px solid #f00'});
    $('#id'+ label).trigger('click');
    let src = `mp3/Telephone-DTMF01-${label}.mp3`;
    const m = new Audio(src);
    m.play();
    //iframe.src = src;
  });
});


//https://otologic.jp/free/se/phone01.html

body{
  overflow:hidden;
}

h1,h2,h3{
  display:none;
}
.icon{
  display:none;
}

#demo{
  display:flex;
  flex-direction: column;
  justify-content: center;
  color:#333;
}

#demo *{
  box-sizing:border-box;
  user-select:none;
}





#demo ul{
  font-family: 'Lato', sans-serif;
  width:60vmin;
  min-width:320px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content: space-around;
  margin:0 auto;
}

#demo.receive{
  background-color:#333;
}
#demo.receive ul.send{
  display:none;
}
#demo:not(.receive) ul.receive{
  display:none;
}
#demo.receive ul.receive{
  display:flex;
}


#demo li{
  position:relative;
  width:26%;
  margin:3%;
  border-radius:50%;
  cursor:pointer;
  overflow:hidden;
  border:1px solid #666;
}


#demo li:before {
  content:"";
  display: block;
  padding-top: 100%;
}
#demo a {
  position: absolute;
  top: 0;
  left: 0;
  width:100%;
  height:100%;
  font-size:240%;
  border:1px solid #666;
  border-radius:50%;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color:transparent;
}
#demo a:focus{
  outline:none;
}

#demo li:hover{
  background-color:#ecf7e8;
  border:1px solid #ecf7e8;
}

#demo a:active{
  background-color:#abedb6;
}


#demo li.null{
  visibility:hidden;
}

#demo li.handset{
  border:1px solid #00DB72;
}
#demo li.handset a{
  background-color:#00DB72;
}
#demo li.close{
  border:1px solid #FF3C30;
}
#demo li.close a{
  background-color:#FF3C30;
}
#demo li.close img{
  transform:rotate(135deg);
}

#demo li a{
  border:1px solid transparent;
}

#demo li img{
  width:100%;
}




#demo span{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
}
#demo iframe{
  display:none;
}

ページのソースを表示 : Ctrl+U , DevTools : F12

view-source:https://hi0a.com/demo/-js/js-telephone/