WordPressでHTML5のオーディオプレイヤーをオリジナルにする方法
WordPressの場合はオーディオファイルをプレイヤーに導入する方法はもっぱらオーディオタグで実装するケースが多かったのですが、今回依頼がありオリジナルのプレイヤーにしたいということで作った。
単純に
初めはJava使おうかと思ったけど、エディターへの埋め込みの作ったりプラグイン化するような予算がなかったのでHTML5で作る事にして、ショートコードで対応をしました。
まあ、ソース自体はオリジナルになるのでこちらで公開しておきます。
PHPはコード
<?php
/**
* 楽曲ショートコード機能
* @package Evange
*/
/**************************** オーディオショートコード ********************************/
// 埋め込む時には以下を利用
// [sound url="" id="" title="" subtitle="" dllink=""]
//
//************************************************************************************
function sound_musicLink($arg, $content=null) {
extract(shortcode_atts(array(
'url' => '',
'id' => '',
'title' => '',
'comment' => '',
'dllink' => '',
), $arg));
$str =<<<EOS
<div class="simple">
<div class="music-contenter col-md-12">
<div id="wrapper">
<div class="audioplayer audioplayer-stopped">
<audio id="{$id}">
<source src="{$url}" type="audio/mp3">
</audio>
<div class="sound-btn">
<span class="button" onclick="audioPlayPause{$id}()"><i class="fa-{$id} fa-play"></i><span class="marquee"><span class="short-title">{$title}</span></span>
//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js
<script>
//再生開始
function audioPlayPause{$id}() {
var myAudio = document.getElementById("{$id}");
if (myAudio.paused) {
myAudio.play();
$('.fa-{$id}').click(function () {
$('.fa-{$id}').removeClass('fa-play');
$('.fa-{$id}').addClass('fa-pause');
});
} else {
myAudio.pause();
$('.fa-{$id}').click(function () {
$('.fa-{$id}').removeClass('fa-pause');
$('.fa-{$id}').addClass('fa-play');
});
}
}
</script>
</div>
<div class="audio-dl-content"><a href="{$dllink}" class="fa-download"></a></div>
</div>
</div>
</div>
<footer class="audio-header"><div class="comments">{$comment}</div> </footer>
</div>
EOS;
return $str;
}
add_shortcode('sound', 'sound_musicLink');
これでショートコードでオーディオファイルを再生／停止・ダウンロードリンクを挿入することが出来ます。
ショートコードの解説
[sound url=”” id=”” title=”” subtitle=”” dllink=””]
で構造を説明すると
url=””：オーディオファイルのURLを記入
id=””：IDを振ることで各プレイヤーが一斉に再生／停止にならないように対応
title=””：タイトルは楽曲のタイトルを入れるべきかと
subtitle=””：どういったシーンシュチュエーションで使うとか雰囲気とかコメント的に使う
dllink=””：ダウンロードリンクのURLですね。
PHPの方をいじるとするとタイトルを再生ボタンにしないと言う事であれば、
<div class="sound-btn">
<span class="button" onclick="audioPlayPause{$id}()"><i class="fa-{$id} fa-play"></i><span class="marquee"><span class="short-title">{$title}</span>
</span>この部分を改変するわけですが
<div class="sound-btn">
<span class="button" onclick="audioPlayPause{$id}()"><i class="fa-{$id} fa-play"></i></span><span class="marquee"><span class="short-title">{$title}</span>
</span>こうしてタイトル部分を出してあげれば、タイトルは再生リンクにならずマーキーで動くという仕様も残せるかと。試してないけど。
CSSとしてタイトルをマーキーでホバー時に動かしたらシンプルでタイトルをクリックしても楽曲が再生出期すようにしてあるし、ダウンロードリンクもホバー時に回転するようにしてあるCSSも書いておきます。
CSSは以下
/* ----------------------------------------
* サウンドショートコード
---------------------------------------- */
.music-contenter.col-md-12 {
width: 100%;
display: block;
padding: 0;
border: 1px solid #eaeaea;
border-radius: 10px;
}
.audioplayer {
display: flex;
justify-content: space-between;
}
span.button i {
margin: 0 .5rem;
color: #fff;
padding: .4rem .7rem;
cursor :pointer;
z-index: 99;
}
.sound-btn span.button:before {
content: "";
padding: 0;
background: #1a2b2b;
z-index: 98;
width: 50px;
height: 47px;
display: block;
position: absolute;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
span.button i:hover {
transition: 0.3s;
}
.fa-play:before {
font-family: FontAwesome;
content: "\f04b";
}
.fa-pause:before {
font-family: FontAwesome;
content: "\f04c";
}
a.fa-download:before {
font-family: FontAwesome;
content: "\f019";
}
span.marquee {
overflow: hidden;
background-color: #f6f6f6;
margin-bottom: 10px;
position: relative;
line-height: 3;
}
.short-title {
display: inline-block;
transition: .3s;
overflow:-webkit-marquee;
white-space:nowrap;
padding-left: 20px;
}
span.marquee .short-title:after {
content:"";
white-space:nowrap;
padding-right:20px;
}
span.marquee .short-title:hover {
font-weight: bold;
color: #47b39d;
margin:0;
padding-left:20px;
display:inline-block;
white-space:nowrap;
/* -webkit-animation-name:marquee;
-webkit-animation-timing-function:linear;
-webkit-animation-duration:50s;
-webkit-animation-iteration-count:infinite;
-moz-animation-name:marquee;
-moz-animation-timing-function:linear;
-moz-animation-duration:50s;
-moz-animation-iteration-count:infinite;
-ms-animation-name:marquee;
-ms-animation-timing-function:linear;
-ms-animation-duration:50s;
-ms-animation-iteration-count:infinite;
-o-animation-name:marquee;
-o-animation-timing-function:linear;
-o-animation-duration:50s;
-o-animation-iteration-count:infinite;
animation-name:marquee;
animation-timing-function:linear;
animation-duration:50s;
animation-iteration-count:infinite;*/
}
@-webkit-keyframes marquee {
from { -webkit-transform: translate(0%);}
99%,to { -webkit-transform: translate(-100%);}
}
@-moz-keyframes marquee {
from { -moz-transform: translate(0%);}
99%,to { -moz-transform: translate(-100%);}
}
@-ms-keyframes marquee {
from { -ms-transform: translate(0%);}
99%,to { -ms-transform: translate(-100%);}
}
@-o-keyframes marquee {
from { -o-transform: translate(0%);}
99%,to { -o-transform: translate(-100%);}
}
@keyframes marquee {
from { transform: translate(0%);}
99%,to { transform: translate(-100%);}
}
.simple .music-contenter header.audio-header h2, .simple .sub-title {
display: none;
}
.sound-btn {
font-size: 1.5em;
line-height: 2.2;
width: 92%;
display: inherit;
overflow: hidden;
background: #f6f6f6;
border: 1px solid #eaeaea;
padding: 0;
border-radius: 10px;
}
.audio-dl-content {
font-size: 2em;
}
.audio-dl-content, .audio-dl-content a {
display: inline-block;
}
.audio-dl-content a {
font-size: 1.5rem;
transition: .5s;
}
.audio-dl-content:hover a {
-webkit-transform: rotateX(360deg);
transform: rotateX(360deg);
}
.simple .music-contenter.col-md-12 {
padding: 0;
}
.simple .sound-btn {
font-size: 1.2em;
line-height: 3;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
}
.simple .audio-dl-content {
font-size: 1.2em;
line-height: 2.5;
margin: 0;
padding: 0 1em;
background: #1a2b2b;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
.simple span.button i {
font-size: 14px;
padding: .2rem .45rem;
position: relative;
top: 0px;
left: 5px;
}
.simple .audio-dl-content a {
color: #fff;
}
.simple span.button i:after {
background: #f6f6f6;
}
.simple .sound-btn span.button:before {
height: 60px;
}この辺りは自由に色を変えたりしてもらえればと、あと、アイコンはFont Awesome4系に準拠していますが、これは依頼されていた方のテーマがFont Awesome4だったから今だったらFont Awesome5系でも良いかなと思っています。
ポイントとしては、今回作る過程で調べていてオーディオプレイヤーがカスタマイズ出来るという部分までは乗っているけど、肝心の再生停止を同期して一つのボタンで動作させる方法が見つからなかったから、自分で作ったという経緯があります。
一つのボタンで、ボタンを押下したときに再生停止が切り替えられるようにしてあります。
一回押下で再生が始まり、もう一回押下すると停止、このときに停止アイコンに変えたいのに、他で掲載されているコードは、再生ボタンと停止ボタンが一緒になっているという。
もう少しカスタマイズというか機能を追記したいならシークボタンや音量ボタンなども追加出来るのですが、今回の依頼はそうしたものをなくしてシンプルにしたいという要望だった。
他に良い方法などあったらTwitterでもなんでもリプくれればうれしいです。
結果としてできあがったプレイヤーはこんな感じ。画像貼っておく
まあ、こんな感じ。
