こんにちは！
今回は、movieとaudioとjavascriptを同時に使う場合の
コードの書き方について、レポートします.
ParticleJSとレスポンシブ、audio + video この４つを共存させる為には、まずひとつひとつを小さな環境で作って確実に動作させることが大事ということで、これを目標に、ひとつひとつ完成させていきたいと思います。
参考になりましたら幸いです。
最小環境でひとつずつコードを理解する
この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 要素ですが、こちらはHTML５から新たにできたもので、標準の書き方は以下です。（＊HTMLリフェレンスより引用）
<audio src="sample/sample.ogg" controls> <p>音声を再生するには、audioタグをサポートしたブラウザが必要です。</p> </audio>
しかし、これを使うとレスポンシブが崩れてしまうため、ミニマムサイズを拝借させて頂きました。
HTML
<div> <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>
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
沢山のスクリプトを使う場合は、小さな環境でひとつひとつ動作を確認し、小さな成功（完成）を積み上げていくこと。
