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 } }
page revision: 175, last edited: 26 May 2019 17:16