音楽再生Scriptをレスポンシブ対応させる方法

こんにちは!

今回は、movieとaudioとjavascriptを同時に使う場合の

コードの書き方について、レポートします.

ParticleJSとレスポンシブ、audio + video この4つを共存させる為には、まずひとつひとつを小さな環境で作って確実に動作させることが大事ということで、これを目標に、ひとつひとつ完成させていきたいと思います。

参考になりましたら幸いです。(完成品はサイドバーにリンクしてあります)

[toc]

最小環境でひとつずつコードを理解する

このaudio要素ですが、HTML5で仕様が変わり、便利になったと聞いていていました。

でも実際使ってみると、曲が長いせいなのか・・、スマホで見た時にボタンがはみ出てしまい崩れるのです。

あらゆるソースをググっては拝借して試してみたものの、レスポンシブでないところで動作しなかったり、レスポンシブになると再生ボタンが押せなかったり・・・と、とことん崩れるのです。

これにはそれぞれ原因がある訳ですが、時間がないのでうまくいった方法をご紹介します。

という訳で一番小さいボタンをピックアップしたいと思います。

今回拝借したのは、こちら

Single Button Audio Player In jQuery

という jQueryとCSSで再生ボタンを作るスクリプトです。

DEMO

レスポンシブWebデザイン

次に、レスポンシブのソースも無料で配布されているものを使わせて頂きました。

(理由は完成のイメージがしやすいからです)

まず、レスポンシブのテンプレートはお気に入りのcolorlibさんから。

Eatwell を改修しています。

こちらにParticleJsをhtmlファイルに追加し、不要なものは削除しました。そして動画をCSSで背景に書いてみましたが、デスクトップサイズではうまく表示できないので、HTMLファイルにvideoタグで書きました。

(※下記にコードあります)

不要なCSSが沢山あって削除する時間がないのは、悔やまれますが、特に問題はないのでテンプレートを利用させて頂きます。

DEMO

<<ここでちょっとCM入らせて頂きます 🙂 >>

ちなみにカナダはトロント在住のアーティスト Anastasia PellerinさんののWEBサイトもこれで作りました!

彼女の素晴らしいアートを紹介するサイトです。ぜひ観に来てください ♪

貴重なお時間をありがとうございます!

Art By Anastasia Pellerin

さて少し休憩して、ひとつづつ小さな環境で完成させて、コードがどんな役割を果たすのかを理解した後、組み合わせていきます。

作りたいサイトイメージ

 

作りたいサイトイメージ

動画を配置するソースコード

まず動画を配置するには、リンク先の動画を以下の様にコードでHTMLに書きます。

ここでまず問題が発生しました。それはスマホでは動かないというものです。

 

<video autoplay loop muted>
 <source src="images/lightforyou.mp4" type="video/mp4">
</video>

 

Audio要素を配置するソースコード

次にaudio 要素ですが、こちらはHTML5から新たにできたもので、標準の書き方は以下です。(*HTMLリフェレンスより引用)

<audio src="sample/sample.ogg" controls>
<p>音声を再生するには、audioタグをサポートしたブラウザが必要です。</p>
</audio>

しかし、これを使うとレスポンシブが崩れてしまうため、ミニマムサイズを拝借させて頂きました。

HTML 

   <div class="demo">
     <div id="bar"></div>
      <p>Bar Animation</p>
     </div>
    </div>

JS 

<script src="dist/jquery.button-audio-player.js"></script>
<script>
  (function($) {
  $('#default').buttonAudioPlayer({
    type: 'default',
    src: 'https://artboxstandard.info/GoldLight/mp3/Shining-Aura.mp3'
  });
  $('#bar').buttonAudioPlayer({
    type: 'bar-animation',
    src: 'https://artboxstandard.info/GoldLight/mp3/Shining-Aura.mp3'
  });
})(jQuery);
</script>
<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-xxxxxxxxx-1']);
  _gaq.push(['_setDomainName', 'jqueryscript.net']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>
<script>
try {
  fetch(new Request("https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js", { method: 'HEAD', mode: 'no-cors' })).then(function(response) {
    return true;
  }).catch(function(e) {
    var carbonScript = document.createElement("script");
    carbonScript.src = "//cdn.carbonads.com/carbon.js?serve=CK7DKKQU&placement=wwwjqueryscriptnet";
    carbonScript.id = "_carbonads_js";
    document.getElementById("carbon-block").appendChild(carbonScript);
  });
} catch (error) {
  console.log(error);
}
</script>

他にもありますが、音楽や再生/停止ボタンのスクリプトはこんな感じで書いています。

ダウンロード元 : Single Button Audio Player In jQuery

こちらをダウンロードしてフォルダの中身を見てみると、結構不要なファイルがあります。

編集したり削除して使っています。単純なソースですが、Google Analyticsのトラッキングコードは、角かっこが入っていて目立ちます。

最終的に、index.htmlファイルと distフォルダだけで成立するということが分かるかと思います。

詳細はデモページでご確認いただけます。

ParticleJSを配置するソースコード

とりあえず基礎的なデザインが整ってきたので、一番フロントエンドなParticleJSを施すことにしました。

こちらもレスポンシブにするべく試行錯誤しました。結果、幅を380pxにすることで解決しました。
なのでデスクトップで見ると、小さくてバランスがあまり整っていません..

ソース

<!-- CreateJSのライブラリー読み込み -->
  <script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
  <script src="libs/particlejs.min.js"></script>

<canvas width=”380″ height=”300″ id=”myCanvas”>Particle JS</canvas>

<!– particleJS –> <script> var particleSystem = null; var stage = null; window.addEventListener(“load”, function () { stage = new createjs.Stage(“myCanvas”); particleSystem = new particlejs.ParticleSystem(); stage.addChild(particleSystem.container); particleSystem.importFromJson( { “bgColor”: “#00000”, “width”: 779, “height”: 787, “emitFrequency”: 64, “startX”: 390, “startXVariance”: 146, “startY”: 400, “startYVariance”: 248, “initialDirection”: 0, “initialDirectionVariance”: 334.5, “initialSpeed”: 2.8, “initialSpeedVariance”: 0.7, “friction”: 0.0155, “accelerationSpeed”: 0, “accelerationDirection”: “275.8”, “startScale”: 0, “startScaleVariance”: 0, “finishScale”: “2”, “finishScaleVariance”: “0”, “lifeSpan”: 109, “lifeSpanVariance”: 82, “startAlpha”: 0.25, “startAlphaVariance”: “0”, “finishAlpha”: 0.39, “finishAlphaVariance”: 0.16, “shapeIdList”: [ “blur_circle”, “heart” ], “startColor”: { “hue”: 347, “hueVariance”: 248, “saturation”: 80, “saturationVariance”: 79, “luminance”: 59, “luminanceVariance”: 24 }, “blendMode”: true, “alphaCurveType”: “0”, “VERSION”: “1.0.0” } ); createjs.Ticker.framerate = 60; createjs.Ticker.timingMode = createjs.Ticker.RAF; createjs.Ticker.addEventListener(“tick”, handleTick); }); function handleTick() { particleSystem.update(); stage.update(); } </script>

 

ics.media (クリエイティブコーダー)
Webサイトに華やかな表現を! HTML5用パーティクルライブラリ「ParticleJS」を (https://ics.media/entry/11172/)
 

ICS Mediaさんの開発提供されているParticleJS Developer にて作成し、好きなパーティクルにデザインしてコピペします。

詳しい使い方についてもページで紹介されています。 >>> ICS Media Particle JS

まとめ

Audioプレイヤーは、再生時間が長い場合、<audio src=””></audio>を使うとレスポンシブが効かない。

レスポンシブにするのには、こちらのソースコードがおすすめ →

Single Button Audio Player In jQuery

沢山のスクリプトを使う場合は、小さな環境でひとつひとつ動作を確認し、小さな成功(完成)を積み上げていくこと。

 

 

Liked Liked
No Comments