ぼくは嫌だ！ボタン

不協和音でおなじみのアレです。

https://bokuhaiyada.hdserver.info/

作り方

・Document root

/var/www/html/voice

・設置ファイル郡

# ll /var/www/html/voice
total 720
-rw-r--r-- 1 apache apache   1021 Jan  1 21:58 index.html
-rw-r--r-- 1 apache apache  16213 Jan  1 13:06 voice01.mp3
-rw-r--r-- 1 apache apache 176478 Jan  1 20:56 voice01.wav
-rw-r--r-- 1 apache apache  17874 Jan  1 13:06 voice02.mp3
-rw-r--r-- 1 apache apache 194118 Jan  1 21:03 voice02.wav
-rw-r--r-- 1 apache apache  25833 Jan  1 13:06 voice03.mp3
-rw-r--r-- 1 apache apache 282318 Jan  1 21:00 voice03.wav
-rw-r--r-- 1 apache apache    248 Jan  1 21:57 voice.css
-rw-r--r-- 1 apache apache   2236 Jan  1 21:33 voice.js

・index.html

<!DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <meta name="robots" content="noindex,nofollow">
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <link href="voice.css" rel="stylesheet">
                <title>けやきざか</title>
        </head>
<body bgcolor="#13536c">

<h1 style="text-align:center;color:#fff;">ぼくはいやだ！！！！</h1>

<center><iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/gfzuzDrVRVM" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></center>

<HR style="margin: 3em 0 ;">

        <center><p><a href="#" class="sounds" data-file="voice01">僕はいやだ！</a></p></center>
        <center><p><a href="#" class="sounds" data-file="voice02">僕はいやだ！！！</a></p></center>
        <center><p><a href="#" class="sounds" data-file="voice03">僕はいやだ！！！！！！</a></p></center>

<!-- JavaScriptの読み込み -->
<script src="voice.js"></script>

</body>
</html>

・voice.css

@charset "UTF-8" ;

.sounds
{
        display: block ;

        width: 90% ;
        max-width: 250px ;
        margin: 8px ;
        padding: 18px 0 ;
        border-radius: 4px ;

        color: #fff ;
        font-weight: 700 ;
        background: #a42740 ;
        text-align: center ;
        text-decoration: none ;
}

・voice.js

var syncerSounds = {
        flag: {} ,
        currentTime: null ,
} ;
(function()
{
        var setClass = 'sounds' ;                      
        var setDir = './' ;                            
        var setStopButtonId = 'stop-button-syncer' ;   
        var sounds = document.getElementsByClassName( setClass ) ;
        for( var i=0,l=sounds.length ; l>i ; i++ )
        {
                sounds[i].onclick = function()
                {
                        var file = this.getAttribute( 'data-file' ) ;
                        if( typeof( syncerSounds.flag[ file ] )=="undefined" || syncerSounds.flag[ file ] != 1 )
                        {
                                var audio = document.createElement( 'audio' ) ;
                                audio.id = file ;
                                if( audio.canPlayType( 'audio/mp3' ) )
                                {
                                        audio.src = setDir + file + '.mp3' ;
                                }
                                else if( audio.canPlayType( 'audio/wav' ) )
                                {
                                        audio.src = setDir + file + '.wav' ;
                                }
                                document.body.appendChild( audio ) ;
                        }
                        stopCurrentSound() ;
                        document.getElementById( file ).play() ;
                        syncerSounds.currentTime = file ;
                        syncerSounds.flag[ file ] = 1 ;
                        return false ;
                }
        }
        function stopCurrentSound()
        {
                var currentSound = document.getElementById( syncerSounds.currentTime ) ;
                if( currentSound != null )
                {
                        currentSound.currentTime = 0 ;
                }
        }
})() ;

・voice01,02,03,mp3、voice01,02,03,wav

「僕は嫌だ！」の音声ファイル3種類。
拡張子が2種類あるのは、ブラウザによって再生できる拡張子が異なる為。