audiojs オリジナルボタンをタップで音楽を再生する方法

Question

Webページにaudiojs を埋め込みました。
audiojsソース元は、http://kolber.github.io/audiojs/　になります。

仮のボタンの画像ファイル、button.jpgを使ってボタンを押すと、
「再生」、もう一度押すと「停止」する仕組みを作りたいです。

一つのボタンで、「再生」と「停止」ができる仕組みです。

<script src="./audiojs/audio.min.js"></script>
    <script>
      audiojs.events.ready(function() {
        audiojs.createAll();
      });
</script>

<img src="images/button.jpg" alt="Play Music" >
<audio src="audio/1. .mp3" preload="auto">

<img src="images/button.jpg" class="audio-control" id="play" alt="PlayMusic" >

</body>

下記がCSSで再生ボタン箇所に画像のURLを入れてみましたが、うまく機能しません。

.audiojs audio {
}
 /*　プレイヤー（再生バー）　*/
.audiojs {
  width: 80px;
  height: 28px;
  background: none;
  overflow: hidden;
  font-family: monospace;
  font-size: 12px;  
  -webkit-box-shadow: none;
  -moz-box-shadow: none;  
  -o-box-shadow: none;
  box-shadow: none;
}
/*　再生・停止ボタン　*/
.audiojs .play-pause {
  width: 20px;
  height: 20px;
  padding: 0;
  margin: 0;
  float: left;
  overflow: hidden;
  image: url("images/button.jpg");
  border: 1px solid #3A3A3A;
  border-radius: 14px;
}
/*　再生・停止ボタンなどの p 要素　*/
.audiojs p {
  display: none;
  width: 26px;
  height: 26px;
  margin: 0px;
  cursor: pointer;
}
.audiojs .play {
  display: block;
}
/*　再生ボタン　*/
.audiojs .play {
  background: url("images/button.jpg") center center no-repeat;　
  margin-left: 1.45px;
}
/*　読み込み中ボタン　*/
.audiojs .loading {
  /*background: url("$1") center center no-repeat;*/
  display: none;
}
/*　エラーボタン　*/
.audiojs .error {
  /*background: url("$1") center center no-repeat;*/
  display: none;
}
/*　停止ボタン　*/
.audiojs .pause {
  background: url("images/button.jpg") center center no-repeat;　←pauseボタン
}
.playing .play, .playing .loading, .playing .error {
  display: none;
}
.playing .pause {
  display: block;
}
.loading .play, .loading .pause, .loading .error {
  display: none;
}
.loading .loading {
  display: block;
}
.error .time, .error .play, .error .pause, .error .scrubber, .error .loading {
  display: none;
}
.error .error {
  display: block;
}
.error .play-pause p {
  cursor: auto;
}
.error .error-message {
  display: block;
}

なお上記のコードに関しては、こちらより参考にさせていただきました。

やりたい内容はこちらになります。

ヒントをください。よろしくお願いします。

Comments

[m.ts10806]

念のため「audiojs」の取得先、公式ページへのリンクなど質問本文にご提示いただければと。

[m.ts10806]

あと、現在のコードにおける、問題・課題も具体的に記載してください。

[StanS.]

記入しました。よろしくお願いします。

Answer 1

どこまでを「オリジナルボタン」とするかによりますが
CSSでおおもとのボタンをいじってみたり
ボタンにクリックイベントを実装してaudio.jsの任意の機能を呼び出してみたり

色々できるようですね。

他にも「audiojs オリジナルボタン」で検索するとそれなりに例が出てきます。
試してみてください。

Comments

[StanS.]

「再生」「停止」をシンプルに一つのボタン（画像）で操作できる方法を探しています。

[m.ts10806]

回答にリンク張ってますが参考にできませんか？
JavaScriptでクリック時に与えるクラスを切り替えるとできると思います。toggleだと表示非表示だけなので。

[StanS.]

ありがとうございます。参考にさせていただきます。

[m.ts10806]

2年以上音沙汰ないまま急に解決とされましたが、何があったのでしょう。どう解決したのでしょうか。
フィードバックください

[StanS.]

ご連絡が遅れてしまいすみませんでした。
JavaScriptで画像にクリック時に与えるクラスを切り替えるとできました。

[StanS.]

また、こちらの開発プロジェクトについて打ち切りをいたしました。
解決するまでお待ちいただきありがとうございます。

[m.ts10806]

いえ別に待ってたわけではなく、通知が来たので