パーツ番号 03-15-09 ・ JavaScript使用

音声入力風マイクアイコン検索

マイクボタンを押すと波形風のパルスアニメーションとステータス文言が変化する音声検索の演出モック。WordPressのモバイル向け検索窓のアクセントに。

mobileclickjs

プレビュー

ソースコード

HTML

<div class="d03-15-09-search">
          <div class="d03-15-09-field">
            <input type="text" class="d03-15-09-input" placeholder="音声入力風検索" aria-label="検索">
            <button class="d03-15-09-mic" type="button" aria-label="音声入力">
              <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="#fff" stroke-width="2"><path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" y1="19" x2="12" y2="23"/></svg>
            </button>
          </div>
          <p class="d03-15-09-status">タップして話しかけてください</p>
        </div>

CSS

.prev.d03-15-09{align-items:flex-start}
        .d03-15-09-search{width:100%;max-width:300px;margin:0 auto;text-align:center}
        .d03-15-09-field{display:flex;align-items:center;gap:8px;padding:6px 6px 6px 13px;background:#fff;border:1.5px solid #e5e7eb;border-radius:24px}
        .d03-15-09-input{flex:1;border:0;outline:none;font-size:13px;color:#1f2937;background:transparent;text-align:left}
        .d03-15-09-mic{flex:0 0 auto;width:34px;height:34px;border:0;border-radius:50%;background:#4f46e5;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:box-shadow .2s}
        .d03-15-09-mic.on{animation:d1833pulse 1s ease-in-out infinite}
        @keyframes d1833pulse{0%,100%{box-shadow:0 0 0 0 rgba(79,70,229,.5)}50%{box-shadow:0 0 0 9px rgba(79,70,229,0)}}
        .d03-15-09-status{margin:8px 0 0;font-size:12px;color:#94a3b8}

JavaScript

(function(){
        var root=document.querySelector('.d03-15-09');if(!root)return;
        var mic=root.querySelector('.d03-15-09-mic');
        var status=root.querySelector('.d03-15-09-status');
        var input=root.querySelector('.d03-15-09-input');
        var on=false;
        mic.addEventListener('click',function(){
          on=!on;
          mic.classList.toggle('on',on);
          if(on){
            status.textContent='聞き取り中...';
            setTimeout(function(){
              if(!mic.classList.contains('on'))return;
              input.value='ホームページ 制作 費用';
              status.textContent='「ホームページ 制作 費用」で検索します';
              mic.classList.remove('on');
            },1400);
          }else{
            status.textContent='タップして話しかけてください';
          }
        });
      })();

クラス名 .d03-15-09 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。