Audio Player Design

まずC-takeさんが作ったコードをコピペします。

HTMLコード

+ show block

include

[[include :shitake-crude-production:javascript:pseudomusicplayer |
music = http://shitake-crude-production.wikidot.com/local--files/audioplay/Chopin-Poronase-Heroic.mp3
|loop=true
|volume=50]]

表示

修正

コード

[[html]]
<style type="text/css">
@import url('http://scp-jp.wdfiles.com/local--files/japanese-syntax/scp-WikidotCss.css');
@import url('https://use.fontawesome.com/releases/v5.1.0/css/all.css');
.pseudoControlerDevice{
    width: 80%;
    min-width: 300px;
    min-height: 3em;
    background: #fff;
    color: black;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 1em;
    border: 3px solid #000;
    box-shadow: inset 1px 1px 1px #666, inset -1px -1px 1px #666;
}
 
.pseudoPlay{
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background-color: transparent;
    font-family: 'Font Awesome 5 Free';
    font-weight: 700;
    cursor: pointer;
}
 
.pseudoPlay:before{
    content: "\f04b";
    display: inline-flex;
    justify-content: left;
    align-items: center;
    font-size: 1.5em;
}
 
.pseudoStop{
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: transparent;
    border: none;
    font-family: 'Font Awesome 5 Free';
    font-weight: 700;
    cursor: pointer;
}
 
.pseudoStop:before{
    content: "\f04c";
    display: inline-flex;
    justify-content: left;
    align-items: center;
    font-size: 1.3em;
}
 
.bufferLine {
    background-color: rgba(255, 255, 255, 0.7);
    height: 10px;
    margin: auto 0;
    position: absolute;
    top: 14px;
    left: 10px;
    z-index: 2;
    cursor: pointer;
    border-radius: 3px 0 0 3px;
}
 
.volumeUpButtom{
    font-family: 'Font Awesome 5 Free';
    font-weight: 700;
    cursor: pointer;
}
 
.volumeUpButtom:before{
    content: '\f028';
}
 
.volumeDownButtom{
    font-family: 'Font Awesome 5 Free';
    font-weight: 700;
    cursor: pointer;
}
 
.volumeDownButtom:before{
    content: '\f027';
}
 
.pseudo-controrler {
    display: flex;
    border-left: 3px solid #000;
    min-width: 250px;
}
 
.pseudo-play-seek-bar {
    background-color: rgba(0, 0, 0, 0.9);
    width: calc(100% - 170px);
    height: 10px;
    margin: auto 0;
    position: absolute;
    top: 14px;
    left: 10px;
    z-index: 1;
    border-radius: 3px;
}
 
.seek-bar {
    background-color: rgba(0, 0, 0, 0.6);
    height: 10px;
    margin: auto 0;
    z-index: 3;
    position: absolute;
    top: 14px;
    left: 10px;
    cursor: pointer;
    border-radius: 3px 0 0 3px;
}
 
.pointer {
    background-color: #fff;
    width: 10px;
    height: 10px;
    margin: auto 0;
    z-index: 4;
    position: absolute;
    top: 11px;
    cursor: pointer;
    border: 3px solid #000;
    border-radius: 50%;
}
 
.time {
    display: inline-flex;
    font-size: 0.5em;
    position: absolute;
    top: 14px;
    right: 165px;
    color: #fff;
    z-index: 1;
    cursor: default;
}
 
.volume-switch {
    display: inline-flex;
    border-left: 3px solid #000;
    border-right: 3px solid #000;
    box-sizing: border-box;
}
 
.loop {
    display: inline-flex;
    padding: 1em;
    cursor: pointer;
    width: 13px;
}
 
.base2 {
    display: flex;
    width: 100%;
    justify-content: flex-end;
    position: relative;
}
 
.volume-controler {
    display: flex;
}
 
.volume-down, .volume-up {
    padding: 1em;
}
 
.volume {
    min-width: 25px;
    padding: 1em 0;
    text-align: center;
    cursor: default;
}
 
.pseudoPlay:hover, .pseudoStop:hover, .volume-down:hover, .volume-up:hover, .loop:hover {
    color: #ccc;
    cursor: pointer;
    background-color: transparent;
}
</style>
<script type="text/javascript" src="http://scp-jp.wdfiles.com/local--files/japanese-syntax/scpHTMLblockCtrl_ver1_ex.js"></script>
<script type="text/javascript">
isHTMLblockHide = {$collapsible};
</script>
<div id="pseudoBGMControler" class="pseudoControlerDevice"><div style="color:#000;text-align:center;">-音楽ファイル読み込み中-</div></div>
<span class="fake-link" id="reload" style="display:none;">音楽を再ロード</span>
<div id="scpHTMLblockResizeSwitch"></div>
 
<script type="text/javascript">
var forPseudoControlerBGM;
var pseudoPlayandPause;
var pseudoPlaySeekBar;
var pseudoPlayisMouseDown = false;
var VolumeInt = 100;
var volumeCtrPush = 0;
var watchMusicState;
var Browser;
var autoplay = {$autoplay}
document.addEventListener( 'DOMContentLoaded',function() {
    forPseudoControlerBGM = new Audio("");
    //ここに流したいBGMを記述↓
    forPseudoControlerBGM.src = "{$music}";
    Browser = getBrowserForMusicPlayer();
    //偽装コントローラー設置
    forPseudoControlerBGM.addEventListener("loadeddata",function(){
 
        var check = isUseSmartPhone();
        if(!check){
            document.addEventListener("mousedown",function(){pseudoPlayisMouseDown = true;});
            document.addEventListener("mouseup",function(){pseudoPlayisMouseDown = false;});
        }else{
            document.addEventListener("touchend",function(){pseudoPlayisMouseDown = false;});
        }
 
        //プレイボタン
        var pseudoControrler = document.getElementById("pseudoBGMControler");
        pseudoControrler.removeChild(pseudoControrler.firstChild);
        if(check){
            pseudoControrler.style.width = "98%";
        }else{
            var window_w = window.innerWidth;
            if(window_w < 500){
                pseudoControrler.style.width = "98%";
            }else if(window_w < 680){
                pseudoControrler.style.width = "90%";
            }else if(window_w < 750){
                pseudoControrler.style.width = "80%";
            }
        }
        setTimeout(function(){pseudoControrler.style.width = (pseudoControrler.getBoundingClientRect().width) + "px";},10);
        var Base = document.createElement("div");
        Base.setAttribute("class","base");
        pseudoPlayandPause = document.createElement("button");
        pseudoPlayandPause.setAttribute("class","pseudoPlay");
        Base.appendChild(pseudoPlayandPause);
        pseudoControrler.appendChild(Base);
        pseudoPlayandPause.setAttribute("onclick","controlBGMbyPseudoControler(1,this,event)");
        //シークバー設置
        Base = document.createElement("div");
        var client = pseudoControrler.getBoundingClientRect();
        Base.setAttribute("class","pseudo-controrler");
        setTimeout(function(){Base.style.width = (pseudoControrler.getBoundingClientRect().width - 45) + "px";},13);
        if(check){
            window.addEventListener( 'resize',function(){
                var width_W = window.innerWidth;
                var target = document.getElementById("pseudoBGMControler");
                target.style.width = Math.floor(width_W * 0.98) + "px";
                target.childNodes[1].style.width = (Math.floor(width_W * 0.98)-45)+"px";
            });
        }else{
            window.addEventListener( 'resize',function(){
                var base = 0.8;
                var width_W = window.innerWidth;
                if(width_W < 500){
                    base = 0.98;
                }else if(width_W < 680){
                    base = 0.9;
                }else if(width_W < 750){
                    base = 0.85;
                }
                var target = document.getElementById("pseudoBGMControler");
                target.style.width = Math.floor(width_W * base) + "px";
                target.childNodes[1].style.width = (Math.floor(width_W * base)-45)+"px";
            });
        }
        var Base2 = document.createElement("div");
        Base2.setAttribute("class","base2");
        pseudoPlaySeekBar = document.createElement("div");
        pseudoPlaySeekBar.setAttribute("class","pseudo-play-seek-bar");
        Base2.appendChild(pseudoPlaySeekBar);
 
        seekBar = document.createElement("div");
        seekBar.setAttribute("class","seek-bar");
        seekBar.setAttribute("style","width:0px;");
        Base2.appendChild(seekBar);
        setEvent(seekBar);
 
        var Buffer = document.createElement("div");
        Buffer.setAttribute("class","bufferLine");
        Buffer.setAttribute("style","width:0px;");
        Base2.appendChild(Buffer);
        setEvent(Buffer);
        var timeView = document.createElement("div");
        timeView.setAttribute("class","time");
 
        Base2.appendChild(timeView);
        var pointer = document.createElement("div");
        pointer.setAttribute("class","pointer");
        pointer.setAttribute("style","left:0;");
        Base2.appendChild(pointer);
        setEvent(pointer);
 
        Base.appendChild(Base2);
        pseudoControrler.appendChild(Base);
 
        //音量ボタン
        var volumeControlerSwitch = document.createElement("div");
        volumeControlerSwitch.setAttribute("class","volume-switch");
        Base2.appendChild(volumeControlerSwitch);
 
        var volumeControler = document.createElement("div");
        volumeControler.setAttribute("class","volume-controler");
        volumeControlerSwitch.appendChild(volumeControler);
 
        var switchOne = document.createElement("div");
        switchOne.setAttribute("class","volume-down");
        var switchTwo = document.createElement("div");
        switchTwo.setAttribute("class","volumeDownButtom");
        switchOne.appendChild(switchTwo);
        volumeControler.appendChild(switchOne);
        switchOne.setAttribute("onclick","(function(){if(VolumeInt <= 0){return;}VolumeInt--;})()");
        if(check){
            switchOne.addEventListener("touchstart",function(event){volumeCtrPush = -1;event.preventDefault();});
            switchOne.addEventListener("touchend",function(){volumeCtrPush = 0;});
        }else{
            switchOne.setAttribute("onmousedown","(function(){volumeCtrPush = -1})()");
            switchOne.setAttribute("onmouseup","(function(){volumeCtrPush = 0;})()");
            switchOne.setAttribute("onmouseout","(function(){volumeCtrPush = 0})()");
        }
 
        var volumeView = document.createElement("div");
        volumeView.setAttribute("class","volume");
        volumeView.innerHTML = VolumeInt;
        volumeControler.appendChild(volumeView);
        controlPseudoBGMControlerSeekBar(seekBar,timeView,pointer,Buffer,forPseudoControlerBGM.duration,volumeView,100,0);
 
        switchOne = document.createElement("div");
        switchOne.setAttribute("class","volume-up");
        switchTwo = document.createElement("div");
        switchTwo.setAttribute("class","volumeUpButtom");
        switchOne.appendChild(switchTwo);
        volumeControler.appendChild(switchOne);
        switchOne.setAttribute("onclick","(function(){if(VolumeInt >= 100){return;alert(check)}VolumeInt++;})()");
 
        if(check){
            switchOne.addEventListener("touchstart",function(event){volumeCtrPush = 1;event.preventDefault();});
            switchOne.addEventListener("touchend",function(){volumeCtrPush = 0;});
        }else{
            switchOne.setAttribute("onmousedown","(function(){volumeCtrPush = 1})()");
            switchOne.setAttribute("onmouseup","(function(){volumeCtrPush = 0})()");
            switchOne.setAttribute("onmouseout","(function(){volumeCtrPush = 0})()");
        }
 
        //ループボタン
        switchOne = document.createElement("div");
var loop = {$loop};
var color = (loop)?"#DD7":"#F55";
    switchOne.setAttribute("class","loop fas fa-undo-alt");
        switchOne.innerHTML = (loop)?"":"";
        forPseudoControlerBGM.loop = loop;
        Base2.appendChild(switchOne);
        switchOne.setAttribute("onclick",'(function(elm){if(forPseudoControlerBGM.loop){forPseudoControlerBGM.loop=false;elm.removeAttribute("class");elm.setAttribute("class","loop fas fa-long-arrow-alt-right");}else{forPseudoControlerBGM.loop=true;elm.removeAttribute("class");elm.setAttribute("class","loop fas fa-undo-alt");}})(this)');
 
        function setEvent(target){
            if(check){
                target.addEventListener("touchmove",function(event){controlBGMbyPseudoControler(4,pseudoPlayandPause,event)});
                target.addEventListener("touchstart",function(event){controlBGMbyPseudoControler(4,pseudoPlayandPause,event)});
            }else{
                target.setAttribute("onclick","controlBGMbyPseudoControler(3,this,event)");
                target.setAttribute("onmousemove","controlBGMbyPseudoControler(2,this,event)");
                target.setAttribute("onmouseover","controlBGMbyPseudoControler(2,this,event)");
            }
        }
        function isUseSmartPhone(){
            return (((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0));
        }
            if(autoplay){
                        pseudoPlayandPause.removeAttribute("class");
            pseudoPlayandPause.setAttribute("class","pseudoStop");
            pseudoPlayandPause.removeAttribute("onclick");
            pseudoPlayandPause.setAttribute("onclick","controlBGMbyPseudoControler(0,pseudoPlayandPause)");
            forPseudoControlerBGM.play();
            }
    });
 
    if(Browser == "firefox" || Browser == 'chrome' || Browser == 'safari'){
        forPseudoControlerBGM.addEventListener("canplay",function(){
            if(forPseudoControlerBGM.paused &&(pseudoPlayandPause.getAttribute("class") == "pseudoStop")){
                replayBGM();
            }
            function replayBGM(){
                if(pseudoPlayandPause.getAttribute("class") == "pseudoStop"){
                    if(!pseudoPlayisMouseDown){
                        forPseudoControlerBGM.play();
                    }else{
                        setTimeout(replayBGM,20);
                    }
                }
            }
            Browser = true;//I love you.
 
        });
    }else{
        Browser = false;//It means your selecting Browser. 
    }
    function getBrowserForMusicPlayer() {
        /*Fuck you!Edge!I hate you!Fuck!*/
        var ua = navigator.userAgent;
        var result = 'unknown';
        if ( ua.indexOf('Edge') !== -1 ) {
            result = 'edge';
        } else if ( ua.indexOf('Chrome') !== -1 ) {
            result = 'chrome';
        } else if ( ua.indexOf('Safari') !== -1 ) {
            result = 'safari';
        }
        if ( ua.indexOf('Firefox') !== -1 ) {
            result = 'firefox';
        }
        if ( ua.indexOf('MSIE 8') !== -1 ) {
            result = 'ie8';
        } else if ( ua.indexOf('MSIE 9') !== -1 ) {
            result = 'ie9';
        } else if ( ua.indexOf('MSIE 10') !== -1 ) {
            result = 'ie10';
        } else if ( ua.indexOf('Trident') !== -1 ) {
            result = 'ie11';
        }
        return result;
    }
 
    forPseudoControlerBGM.addEventListener("error",function(){
        if(watchMusicState != undefined)clearTimeout(watchMusicState);
        var reload = document.getElementById("reload");
        reload.style.display="inline";
        reload.setAttribute("onclick","(function(elm){document.getElementById('pseudoBGMControler').innerHTML = '<center>音楽再ロード</center>';forPseudoControlerBGM.load();elm.style.display='none';correctIframeSize();})(this)");
        correctIframeSize();
    });
    forPseudoControlerBGM.addEventListener("ended",function(){
        if(!forPseudoControlerBGM.loop){
            pseudoPlayandPause.removeAttribute("class");
            pseudoPlayandPause.setAttribute("class","pseudoPlay");
            pseudoPlayandPause.removeAttribute("onclick");
            pseudoPlayandPause.setAttribute("onclick","controlBGMbyPseudoControler(1,pseudoPlayandPause)");
        }
    });
    forPseudoControlerBGM.load();
});
 
function controlBGMbyPseudoControler(type,elm,event){
    switch(type){
        case 0:
            if(forPseudoControlerBGM.paused)return;
            forPseudoControlerBGM.pause();
            changeMode();
        break;
        case 1:
            forPseudoControlerBGM.play();
            changeMode();
        break;
        case 2:
            if(!pseudoPlayisMouseDown)return;
        case 3:
            forPseudoControlerBGM.pause();
            var bar_w = pseudoPlaySeekBar.getBoundingClientRect();
            controlCurrentTime(event.pageX);
        break;
        case 4:
            pseudoPlayisMouseDown = true;
            forPseudoControlerBGM.pause();
            controlCurrentTime(event.touches[0].pageX);
            event.preventDefault();
        break;
    }
    function controlCurrentTime(pos){
        var bar_w = pseudoPlaySeekBar.getBoundingClientRect();
        pos -=  bar_w.left;
        if(pos < 0)pos = 0;
        if(pos > bar_w.width)pos = bar_w.width;
        var newCurrent = forPseudoControlerBGM.duration * (pos/bar_w.width);
        if(newCurrent > forPseudoControlerBGM.buffered.end(0))newCurrent = forPseudoControlerBGM.buffered.end(0);
        forPseudoControlerBGM.currentTime = newCurrent;
    }
    function changeMode(){
        elm.removeAttribute("class");
        var nextClass = (type < 1)?"pseudoPlay":"pseudoStop";
        elm.setAttribute("class",nextClass);
        elm.removeAttribute("onclick");
        elm.setAttribute("onclick","controlBGMbyPseudoControler("+((type+1)%2)+",this,event)");
 
    }
}
 
function controlPseudoBGMControlerSeekBar(track,timeView,pointer,Buffer,TimeLimit,switchOne,preVolume,volumeCount){
    var bar_w = pseudoPlaySeekBar.getBoundingClientRect();
    bar_w = bar_w.width;
    var current = forPseudoControlerBGM.currentTime;
    var persent = Math.floor(bar_w *(current / TimeLimit));
    track.style.width = persent + "px";
    pointer.style.left = (persent + 5) + "px";
    persent = Math.floor(bar_w *(forPseudoControlerBGM.buffered.end(0) / TimeLimit));
    Buffer.style.width = persent + "px";
    TimeLimit = insertPriod(TimeLimit,0);
    current = insertPriod(current,1);
    timeView.innerHTML = current + "/" + TimeLimit;
    if(volumeCtrPush != 0){
        volumeCount ++;
        if(volumeCount >= 10){
            if(volumeCount == 10 || ((volumeCount > 10) && (volumeCount%5 == 0)) || (volumeCount >50)){
                if(volumeCount > 50)volumeCount = 50;
                VolumeInt += volumeCtrPush;
                if(VolumeInt >= 100)VolumeInt = 100;
                if(VolumeInt <= 0)VolumeInt = 0;
            }
        }
    }else{
        volumeCount = 0;
    }
    if(preVolume != VolumeInt){
        forPseudoControlerBGM.volume = VolumeInt/100;
        switchOne.innerHTML = VolumeInt;
        preVolume = VolumeInt;
    }
    if(!Browser){
        if(forPseudoControlerBGM.paused &&(pseudoPlayandPause.getAttribute("class") == "pseudoStop") && !forPseudoControlerBGM.ended && !pseudoPlayisMouseDown){    
            forPseudoControlerBGM.play();
        }
    }
    watchMusicState = setTimeout(function(){controlPseudoBGMControlerSeekBar(track,timeView,pointer,Buffer,TimeLimit,switchOne,preVolume,volumeCount)},100);
 
    function insertPriod(n,type){
        n ++;
        n = Math.floor(n * 100);
        n = String(n);
        n = (Number(n.slice(0,n.length-2))-1) + "." + n.slice(n.length-2,n.length);
        if(type == 1){
            while(n.length < TimeLimit.length)n = "0"+n;
        }
        return n;
    }
}
</script>
[[/html]]
page revision: 12, last edited: 19 Jul 2018 05:27
Edit Rate (0) Tags Discuss History Files Print Site tools + Options
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License