New Player
<!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"> <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"> <svg id="playPause" class="play-pause-icon" viewBox="0 0 30 30"> <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="bar-wrap"> <input id="seekbar" type="range" value="0" min="0" max="100" step="1" oninput="seekbarFire()" onclick="seekbarFire()"> <canvas id="buffer"></canvas> </div> <span class="total-time">00:00</span> </div> <div class="volume"> <svg class="volume-icon" viewBox="0 0 30 30"> <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 30 30"> <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; height: 6px; z-index: 2; } .bar-wrap { 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: 350px) { #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 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 playerSrc = audioPlayerWrap.querySelector('audio'); //Url Parameter var urlPars = /^#([^#]*)(#autoplay)?$/; 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 (match) { if (match[2]) { player.setAttribute('autoplay','autoplay'); } } var playPauseIcon = audioPlayerWrap.querySelector('.play-pause-path'); playPauseButton.addEventListener('click', togglePlay); player.addEventListener('timeupdate', updateProgress); player.addEventListener('loadedmetadata', function () { totalTime.textContent = formatTime(player.duration); /* 追加した部分 */ setInterval("seekbuf()",1000); }); player.addEventListener('volumechange', updateVolume); volumeButton.addEventListener('click', toggleVolume); player.addEventListener('canplay', makePlay); 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(); } } /* 肝の部分 */ buffer.style.width = seekbar.offsetWidth + "px"; 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.end(0) / player.duration == 1) {;} else { for(var i = 0;i < 1;i++){ bufferC.fillStyle = 'rgba(150, 80, 150, 0.9)'; bufferC.beginPath(); bufferC.moveTo(seekbar.offsetWidth * player.buffered.start(i), 1); bufferC.lineTo(seekbar.offsetWidth * player.buffered.start(i), 11); bufferC.lineTo(seekbar.offsetWidth * player.buffered.end(i) / player.duration, 11); bufferC.lineTo(seekbar.offsetWidth * player.buffered.end(i) / player.duration, 1); bufferC.closePath(); bufferC.fill(); } } }; 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'; } 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; } }
page revision: 100, last edited: 13 Mar 2019 02:18