Test Page Change 2

<!DOCTYPE html>
<html lang="ja">
<head>
    <title>D-Player</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="./2" />
    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=PT+Mono" />
</head>
<body>
    <div id="d-player-wrap">
        <div class="audio-wrap"></div>
        <div class="loading" style="display:inline-flex;">
        <div class="loading-spinner">
        <svg class="circular-icon" viewBox="25 25 50 50" >
        <circle class="circular-path" cx="50" cy="50" r="20" fill="none" stroke="#000" stroke-width="7" />
        </svg>
        </div>
        </div>
 
        <div class="play-pause" style="display:none;">
        <svg id="playPause" class="play-pause-icon" viewBox="0 0 50px 50px">
        <path class="play-pause-path" d="M21.6,15.6L9.5,24.9c-0.6,0.5-1.5,0-1.5-0.7L8,5.9c0-0.8,0.9-1.2,1.5-0.8l12.1,8.9C22.1,14.5,22.1,15.2,21.6,15.6z" />
        </svg>
        </div>
 
        <div class="progress-bar">
        <span class="play-time">00:00</span>
        <div class="control-container">
          <canvas id="buffer" height="6" width="0"></canvas>
          <input id="seekbar" type="range" value="0" min="0" max="100" oninput="seekbarFire()" onclick="seekbarFire()" step="any" style="visibility:hidden;" disabled><!--onclickはIE用-->
 
        </div>
 
        <span class="total-time">00:00</span>
        </div>
 
        <div class="volume">
        <svg class="volume-icon" viewBox="0 0 50px 50px">
        <path id="speaker-path" d="M17.7,4.2v1.3c0,0.3,0.2,0.5,0.5,0.6c3.6,1.3,6.2,4.7,6.2,8.8c0,4.1-2.6,7.5-6.2,8.8c-0.3,0.1-0.5,0.4-0.5,0.6 v1.4c0,0.5,0.5,0.8,0.9,0.7C23.5,24.9,27,20.4,27,15c0-5.4-3.5-9.9-8.4-11.4C18.1,3.4,17.7,3.7,17.7,4.2z M21,15 c0-1.9-0.8-3.5-2.2-4.6c-0.5-0.4-1.1,0-1.1,0.5v8.2c0,0.6,0.7,0.9,1.1,0.5C20.2,18.5,21,16.9,21,15z M3,11.7v6.6 C3,18.7,3.3,19,3.7,19H8c0.2,0,0.4,0.1,0.5,0.2l5.3,5.3c0.4,0.4,1.2,0.1,1.2-0.5V6c0-0.6-0.7-0.9-1.2-0.5l-5.3,5.3 C8.4,10.9,8.2,11,8,11H3.7C3.3,11,3,11.3,3,11.7z" />
        </svg>
        </div>
 
        <div class="loop">
        <svg class="loop-icon" viewBox="0 0 50px 50px">
        <path id="loop-path"" d="M27.1,15.4l-3-3l-4.1-4.1c-0.4-0.4-1-0.4-1.4,0l-2.3,2.3c-0.4,0.4-0.4,1,0,1.4l1.5,1.5H3.2c-0.6,0-1,0.4-1,1v3.2 c0,0.6,0.4,1,1,1h14.6l-1.5,1.5c-0.4,0.4-0.4,1,0,1.4l2.3,2.3c0.4,0.4,1,0.4,1.4,0l7.1-7.1C27.5,16.4,27.5,15.8,27.1,15.4z" />
        </svg>
        </div>
    </div>
    <script async src="./3"></script>
</body>
</html>
@charset utf-8;
 
body {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
}
 
div , svg {
    max-height: 100%;
    box-sizing: border-box;
}
 
svg {
    width: 30px;
    height: 30px;
}
 
#d-player-wrap {
    width: 95vw;
    max-width: 500px;
    height: 50px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    background-color: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    -webkit-transition: all 0.3s cubic-bezier(.25,.8,.25,1);
    transition: all 0.3s cubic-bezier(.25,.8,.25,1);
    border-radius: 3px;
}
 
#d-player-wrap:hover {
    box-shadow: 0 3px 11px rgba(0,0,0,0.25), 0 3px 11px rgba(0,0,0,0.22);
}
 
.loading, .play-pause, .volume, .loop {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    padding: 10px;
    width: 50px;
    height: 50px;
    cursor: pointer;
}
 
.play-pause {
    display: none;
}
 
.loading {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    cursor: wait;
}
 
.loading:hover, .play-pause:hover, .volume:hover, .loop:hover {
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
 
.play-pause svg.play-pause-icon {
    width: 30px;
    height: 30px;
}
 
.progress-bar {
    width: 100%;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    padding: 10px;
}
 
.play-time, .total-time {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    width: 50px;
    height: 30px;
    line-height: 30px;
    font-family: 'PT Mono', monospace;
}
 
input#seekbar {
    cursor: pointer;
    margin: 0;
    -webkit-appearance: none;
    outline: none;
    height: 6px;
    background-color: transparent;
    width: 100%;
    z-index: 3;
}
 
input#seekbar::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 8px;
    background: #00da3e;
    cursor: pointer;
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.32);
}
 
input#seekbar::-moz-range-thumb {
    -webkit-appearance: none;
    -moz-appearance: none;
         appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 8px;
    background: #00da3e;
    cursor: pointer;
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.32);
}
 
canvas#buffer {
    box-sizing: border-box;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    position: absolute;
    z-index: 2;
    border-radius: 5px;
}
 
.control-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    border-radius: 5px;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: start;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background-color: #ffa5a5;
    width: 100%;
    margin: 0 10px;
    z-index: 1;
}
 
.volume-button {
    width: 30px;
    height: 30px;
}
 
.hidden {
    display: none;
}
 
.volume-controls {
}
 
.circular-icon {
    -webkit-animation: rotate 2s linear infinite;
    animation: rotate 2s linear infinite;
    -webkit-transform-origin: center center;
    transform-origin: center center;
}
 
.circular-path {
    stroke-dasharray: 150,200;
    stroke-dashoffset: -10;
    -webkit-animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
            animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
    stroke-linecap: round;
}
 
@-webkit-keyframes rotate {
    100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
    }
}
 
@keyframes rotate {
    100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
    }
}
@-webkit-keyframes dash {
    0% {
        stroke-dasharray: 1,200;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 89,200;
        stroke-dashoffset: -35;
    }
    100% {
        stroke-dasharray: 89,200;
        stroke-dashoffset: -124;
    }
}
@keyframes dash {
    0% {
        stroke-dasharray: 1,200;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 89,200;
        stroke-dashoffset: -35;
    }
    100% {
        stroke-dasharray: 89,200;
        stroke-dashoffset: -124;
    }
}
@-webkit-keyframes color {
    0% {
        stroke: #000;
    }
    40% {
        stroke: #000;
    }
    66% {
        stroke: #000;
    }
    80%, 90% {
        stroke: #000;
    }
}
@keyframes color {
    0% {
        stroke: #000;
    }
    40% {
        stroke: #000;
    }
    66% {
        stroke: #000;
    }
    80%, 90% {
        stroke: #000;
    }
}
 
@media (max-width: 400px) { 
    .progress-bar {
        font-size: 3vw;
    }
}
 
@media (max-width: 300px) { 
    #d-player-wrap {
        width: 150px;
    }
    .progress-bar {
        display: none;
    }
}
 
@media all and (-ms-high-contrast: none) {
    #d-player-wrap {
        width: 150px;
    }
    .progress-bar {
        display: none;
    }
}
'use strict';
 
var playStatus = 'Loading';
 
var audioPlayerWrap = document.querySelector('#d-player-wrap');
var playPause = audioPlayerWrap.querySelector('#playPause');
var playPauseButton = audioPlayerWrap.querySelector('.play-pause');
var loading = audioPlayerWrap.querySelector('.loading');
 
var volumeButton = audioPlayerWrap.querySelector('.volume');
var volumeControls = audioPlayerWrap.querySelector('.volume-controls');
var audioWrap = audioPlayerWrap.querySelector('.audio-wrap');
var currentTime = audioPlayerWrap.querySelector('.play-time');
var totalTime = audioPlayerWrap.querySelector('.total-time');
var speakerButton = audioPlayerWrap.querySelector('#speaker-path');
var loopButton = audioPlayerWrap.querySelector('.loop');
var loopIcon = audioPlayerWrap.querySelector('#loop-path');
/* 以下は追加した宣言 */
var seekbar = document.getElementById('seekbar');
var buffer = document.getElementById('buffer');
var bufferC = buffer.getContext('2d'); 
 
// 特殊制御
var NormalyFlg = true;
 
// 端末情報取得
var Terminal = getTerminalData ();
 
//Url Parameter
var urlPars = /^#([^#]*)(#autoplay=true|#autoplay=false)?(#repeat=true|#repeat=false)?$/;
var match = urlPars.exec(unescape(window.location.hash));
 
if (match) {
    audioWrap.innerHTML = '<audio class="d-audio-player"><source id="d-audio-player-source" src="' + match[1] + '" type="audio/mpeg" /></audio>';
} else {
    audioPlayerWrap.classList.add("hidden");
    audioWrap.innerHTML = '<i class="url-error-message">オーティオのURLが有効ではありません。</i>';
}
 
var player = audioPlayerWrap.querySelector('audio');
if (3 <= match.length) {
    if (match[2] == '#autoplay=true' ) {
        player.autoplay = true;
    }
if(4 <= match.length)
    if(match[3] == '#repeat=true' ){
         toggleLoop();
   }
}
 
var playPauseIcon = audioPlayerWrap.querySelector('.play-pause-path');
playPauseButton.addEventListener('click', togglePlay);
player.load();
// つまみの位置調整
seekbar.value = 0;
player.addEventListener('timeupdate', updateProgress);
player.addEventListener('loadedmetadata', function () {
  totalTime.textContent = formatTime(player.duration);
  // サイズ変更
  seekbar.style.visibility = 'visible';
  buffer.setAttribute("width", seekbar.offsetWidth);
  buffer.style.visibility = 'visible';
/* 追加した部分 */
 
     seekbar.value = 0;
    if(Terminal.OS == 'iOS'){
        NormalyFlg = false;
        player.addEventListener('canplaythrough', function () {
            NormalyFlg = true;
            seekbar.disabled = false;
            makePlay();
        });
 
     }else{
         player.addEventListener('canplay', function () {
             seekbar.disabled = false;
             makePlay();
         });
     }
 
    setInterval("seekbuf()",500);
});
player.addEventListener('volumechange', updateVolume);
 
if(Terminal.OS == 'iOS'){
    volumeButton.style.display = 'none';
}else{
    volumeButton.addEventListener('click', toggleVolume);
}
 
player.addEventListener('ended', endBack);
loopButton.addEventListener('click', toggleLoop);
 
function togglePlay() {
  if (player.paused) {
    playPauseIcon.attributes.d.value = "M6.7,2.7h4.6C11.7,2.7,12,3,12,3.4V26c0,0.4-0.3,0.7-0.7,0.7H6.7C6.3,26.7,6,26.4,6,26V3.4 C6,3,6.3,2.7,6.7,2.7z M18.7,2.7h4.6C23.7,2.7,24,3,24,3.4V26c0,0.4-0.3,0.7-0.7,0.7h-4.6c-0.4,0-0.7-0.3-0.7-0.7V3.4 C18,3,18.3,2.7,18.7,2.7z";
    player.play();
  } else {
    playPauseIcon.attributes.d.value = "M21.6,15.6L9.5,24.9c-0.6,0.5-1.5,0-1.5-0.7L8,5.9c0-0.8,0.9-1.2,1.5-0.8l12.1,8.9C22.1,14.5,22.1,15.2,21.6,15.6z";
    player.pause();
  }
}
 
/* 肝の部分 */
 
// サイズ変更に対応
document.addEventListener( 'resize',function(){
    buffer.setAttribute("width", seekbar.offsetWidth);
});
function updateProgress() {
    currentTime.textContent = formatTime(player.currentTime);
    seekbar.value = player.currentTime / player.duration * 100;
}
function seekbarFire() {
    player.currentTime = seekbar.value / 100 * player.duration;
};
 
function seekbuf() {
    if( player.buffered.length == 0)return;
 
    var StopPlaying= true;
 
        for(var i = 0;i < player.buffered.length;i++){
            // 読み込み完了領域の色付け
            bufferC.fillStyle = 'hsla(203, 40%, 70%, 0.9)';
            bufferC.beginPath();
            var startX = seekbar.offsetWidth * (player.buffered.start(i)/ player.duration);
            bufferC.moveTo(startX, 0);
            bufferC.lineTo(startX, buffer.offsetHeight);
            var endX = seekbar.offsetWidth * (player.buffered.end(i) / player.duration);
            if(player.buffered.start(i) <= player.currentTime && player.currentTime <= player.buffered.end(i)){
                StopPlaying = false;
            }
            bufferC.lineTo(endX, buffer.offsetHeight);
            bufferC.lineTo(endX, 0);
            bufferC.closePath();
            bufferC.fill();
        }
        // // シークの位置を調整する
        // seekbar.value = player.currentTime / player.duration * 100;
 
        if(StopPlaying && playStatus == 'Playing'){
               reloading();
        }else if(!StopPlaying && playStatus == 'Loading' && NormalyFlg){
             makePlay();
        }
};
 
function formatTime(time) {
  var min = Math.floor(time / 60);
  var sec = Math.floor(time % 60);
  return (min < 10 ? '0' + min : min) + ':' + (sec < 10 ? '0' + sec : sec);
}
 
function updateVolume() {
 
  if (player.volume > 0.5) {
    speakerButton.attributes.d.value = 'M17.7,4.2v1.3c0,0.3,0.2,0.5,0.5,0.6c3.6,1.3,6.2,4.7,6.2,8.8c0,4.1-2.6,7.5-6.2,8.8c-0.3,0.1-0.5,0.4-0.5,0.6 v1.4c0,0.5,0.5,0.8,0.9,0.7C23.5,24.9,27,20.4,27,15c0-5.4-3.5-9.9-8.4-11.4C18.1,3.4,17.7,3.7,17.7,4.2z M21,15 c0-1.9-0.8-3.5-2.2-4.6c-0.5-0.4-1.1,0-1.1,0.5v8.2c0,0.6,0.7,0.9,1.1,0.5C20.2,18.5,21,16.9,21,15z M3,11.7v6.6 C3,18.7,3.3,19,3.7,19H8c0.2,0,0.4,0.1,0.5,0.2l5.3,5.3c0.4,0.4,1.2,0.1,1.2-0.5V6c0-0.6-0.7-0.9-1.2-0.5l-5.3,5.3 C8.4,10.9,8.2,11,8,11H3.7C3.3,11,3,11.3,3,11.7z';
  } else if (player.volume <= 0.5 && player.volume > 0.05) {
    speakerButton.attributes.d.value = 'M21,15c0-1.6-0.6-3-1.6-4.1c-0.6-0.6-1.7-0.2-1.7,0.7c0,1.9,0,4.9,0,6.8c0,0.9,1.1,1.4,1.7,0.7C20.4,18,21,16.6,21,15z M3,12v6c0,0.6,0.4,1,1,1h3.9c0.3,0,0.5,0.1,0.7,0.3l4.7,4.7c0.6,0.6,1.7,0.2,1.7-0.7V6.7c0-0.9-1.1-1.3-1.7-0.7l-4.7,4.7 C8.4,10.9,8.2,11,7.9,11H4C3.4,11,3,11.4,3,12z';
  } else if (player.volume <= 0.05) {
    speakerButton.attributes.d.value = 'M6.7,11.3l8,8c0.2,0.2,0.3,0.4,0.3,0.7v3.3c0,0.9-1.1,1.3-1.7,0.7l-4.7-4.7C8.4,19.1,8.2,19,7.9,19H4c-0.6,0-1-0.4-1-1v-6 c0-0.6,0.4-1,1-1h2C6.3,11,6.6,11.1,6.7,11.3z M15,11.3V6.8c0-0.9-1.1-1.3-1.7-0.7L11,8.3c-0.4,0.4-0.4,1,0,1.4l2.3,2.3 C13.9,12.6,15,12.2,15,11.3z M22.4,22.5L4.8,4.9c-0.4-0.4-1.1-0.4-1.5,0l0,0C2.9,5.4,2.9,6,3.3,6.4L20.9,24c0.4,0.4,1.1,0.4,1.5,0h0 C22.8,23.6,22.8,23,22.4,22.5z';
  }
}
 
function toggleVolume() {
    if (player.volume == 1) {
        player.volume = 0;
    } else if (player.volume == 0) {
        player.volume = 0.5;
    } else if (player.volume == 0.5) {
        player.volume = 1;
    }
}
 
function makePlay() {
  // 再生・停止ボタンを表示する
  playPauseButton.style.display = 'inline-flex';
  loading.style.display = 'none';
  playStatus = 'Playing';
}
 
function reloading() {
  // ローディングインジケータ―を表示する
  playPauseButton.style.display = 'none';
  loading.style.display = 'inline-flex';
  playStatus = 'Loading';
}
 
function endBack() {
  playPauseIcon.attributes.d.value = "M21.6,15.6L9.5,24.9c-0.6,0.5-1.5,0-1.5-0.7L8,5.9c0-0.8,0.9-1.2,1.5-0.8l12.1,8.9C22.1,14.5,22.1,15.2,21.6,15.6z";
  player.currentTime = 0;
}
 
function toggleLoop() {
    if (player.loop ==  false) {
        loopIcon.attributes.d.value = 'M28.4,5.2l-5.8-1.5l-4.2-1.1c-0.5-0.1-1,0.2-1.1,0.6l-1.1,4.2l-1.5,5.8c-0.1,0.5,0.2,1,0.6,1.1l3.3,0.9 c0.5,0.1,1-0.2,1.1-0.6l0.6-2.1c1.8,3.7,0.1,8.3-4.1,9.6c-2.5,0.8-5.4,0.1-7.2-1.9c-2.9-3.2-2.2-7.9,1-10.3c0.3-0.3,0.4-0.7,0.2-1.1 L8.4,5.6C8.2,5.1,7.6,5,7.2,5.2c-5.4,3.6-7,10.9-3.5,16.6c3.3,5.4,10.6,7.4,16.3,4.4c5.9-3.2,8.1-10.6,5-16.5l2.1,0.6 c0.5,0.1,1-0.2,1.1-0.6l0.9-3.3C29.2,5.8,28.9,5.3,28.4,5.2z';
        player.removeEventListener('ended', endBack);
        player.loop = true;
    } else if (player.loop == true) {
        loopIcon.attributes.d.value = 'M27.1,15.4l-3-3l-4.1-4.1c-0.4-0.4-1-0.4-1.4,0l-2.3,2.3c-0.4,0.4-0.4,1,0,1.4l1.5,1.5H3.2c-0.6,0-1,0.4-1,1v3.2 c0,0.6,0.4,1,1,1h14.6l-1.5,1.5c-0.4,0.4-0.4,1,0,1.4l2.3,2.3c0.4,0.4,1,0.4,1.4,0l7.1-7.1C27.5,16.4,27.5,15.8,27.1,15.4z';
        player.addEventListener('ended', endBack);
        player.loop = false;
    }
}
 
// 機能名     : getTerminalData
// 機能概要   : ユーザが使用している端末情報(OS,ブラウザ)の情報を返す
// 戻り値     : Object 下記パラメータを格納
//              OS : String : OSの名称を格納
//              Browser : String : ブラウザの名称格納
//              SmartPhone : Boolean : スマートフォンを使用しているか否か
//              MSBrowser : Boolean : EdgeもしくはIEを使用しているか否か
function getTerminalData () {
    var stringOS, ua = navigator.userAgent;
    if (ua.match(/Win(dows )?NT 10\.0/)) {
        //Windows10
        stringOS = 'Windows 10';
    } else if (ua.match(/Win(dows )?NT 6\.3/)) {
        //Windows 8.1
        stringOS = 'Windows 8.1';
    }else if(ua.match(/Win(dows )?NT 6\.2/)){
        //Windows 8
        stringOS = 'Windows 8';
    }else if(ua.match(/Win(dows )?NT 6\.1/)){
        //Windows 7
        stringOS = 'Windows 7';
    } else if (ua.match(/Win(dows )?NT 6\.0/)) {
        //Windows Vista
        stringOS = 'Windows Vista';
    } else if (ua.match(/Win(dows )?NT 5\.2/)) {
        //Windows Server 2003
        stringOS = 'Windows Server 2003';
    } else if (ua.match(/Win(dows )?(NT 5\.1|XP)/)) {
        //Windows XP
        stringOS = 'Windows XP';
    } else if (ua.match(/Win(dows )? (9x 4\.90|ME)/)) {
        //Windows ME
        stringOS = 'Windows ME';
    } else if (ua.match(/Win(dows )?(NT 5\.0|2000)/)) {
        //Windows 2000
        stringOS = 'Windows 2000';
    } else if (ua.match(/Win(dows )?98/)) {
        //Windows 98
        stringOS = 'Windows 98';
    } else if (ua.match(/Win(dows )?NT( 4\.0)?/)) {
        //Windows NT
        stringOS = 'Windows NT';
    } else if (ua.match(/Win(dows )?95/)) {
        //Windows 95
        stringOS = 'Windows 95';
    } else if (ua.match(/Windows Phone/)) {
        //Windows Phone
        stringOS = 'Windows Phone';
    } else if (ua.match(/iPhone|iPad/)) {
        //iOS
        stringOS = 'iOS';
    } else if (ua.match(/Mac|PPC/)) {
        //Macintosh
        stringOS = 'Mac OS';
    } else if (ua.match(/Android ([\.\d]+)/)) {
        //Android
        stringOS = 'Android' + RegExp.$1;
    } else if (ua.match(/Linux/)) {
        //Linux
        stringOS = 'Linux';
    } else if (ua.match(/^.*\s([A-Za-z]+BSD)/)) {
        //BSD
        stringOS = RegExp.$1;
    } else if (ua.match(/SunOS/)) {
        //Solaris
        stringOS = 'Solaris';
    } else {
        //不明のOS
        stringOS = 'N/A';
    }
    //スマートフォン使用判定
    var booleanSmartPhone = ((0 <= ua.indexOf('iPhone') && ua.indexOf('iPad')===-1)||
                            0 <= ua.indexOf('iPod') || 0 <= ua.indexOf('Android'));
    //ブラウザ判定
    var stringBrowser = 'N/A';
    if (ua.indexOf('Edge') !== -1) {
        stringBrowser = 'Edge';
    } else if (ua.indexOf('Chrome') !== -1) {
        stringBrowser = 'Google Chrome';
    } else if (ua.indexOf('Safari') !== -1) {
        stringBrowser = 'Safari';
    }else if (ua.indexOf('Firefox') !== -1) {
        stringBrowser = 'Firefox';
    }else if (ua.indexOf('MSIE 8') !== -1) {
        stringBrowser = 'IE 8';
    } else if (ua.indexOf('MSIE 9') !== -1) {
        stringBrowser = 'IE 9';
    } else if (ua.indexOf('MSIE 10')) {
        stringBrowser = 'IE 10';
    } else if (ua.indexOf('Trident') !== -1) {
        stringBrowser = 'IE 11';
    }
    //マイクロソフトのブラウザ使用判定
    var booleanMSBrowser = (stringBrowser === 'Edge' || stringBrowser.indexOf('IE') === 0);
 
    //結果をオブジェクトにして返す
    return {
        OS: stringOS,
        Browser:stringBrowser,
        SmartPhone: booleanSmartPhone,
        MSBrowser: booleanMSBrowser
 
    }
}
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License