ミギムキ

[CSS] audioタグのデザインを変えたい

やりたいこと

「audio.js」をWordPress環境に導入する

<?php function enqueue_my_script() { wp_enqueue_script( 'functions_js', get_stylesheet_directory_uri() . '/js/audiojs/audio.min.js', array('jquery'), false, false ); } add_action('wp_enqueue_scripts', 'enqueue_my_script'); ?> jQuery(function($) { audiojs.events.ready(function() { var as = audiojs.createAll(); }); }); <audio src="./music.mp3" preload="auto">
スポンサー広告

再生ボタンだけのデザインにスタイルし直す

.audiojs, .audiojs > .play-pause, .audiojs > .play-pause > p { width: 30px; height: 30px; } .audiojs { display: table; margin: 0px; background: none; box-shadow: none; border: 2px solid #000; } .audiojs > .play-pause { padding: 0px; border: none; } .audiojs > .play-pause > p { position: relative; background: none; } .audiojs > .play-pause > .play:before { position: absolute; top: 50%; left: 50%; transform: translateX(-25%) translateY(-50%); width: 0px; height: 0px; border: 8px solid transparent; border-left: 12px solid #000; content: ""; } .audiojs > .play-pause > .pause:before { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); width: 4px; height: 12px; border-left: 4px solid #000; border-right: 4px solid #000; content: ""; } .audiojs > .scrubber { display: none; } .audiojs > .time { display: none; }