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

Edit Rate (0) Tags History Files Print Site tools + Options

椎茸天然製造

Shitake Crude Production