Q&A
プログラムコードは```で囲ってください。（わからなければ質問編集画面でコード部分を選択し<code>ボタンを押してください）
###前提・実現したいこと
monaca Onsen UI V2 JS Splitterにオーディオプレイヤーを埋め込みたいです。
参照URL http://pannyatto.firebird.jp/archives/1863
###発生している問題・エラーメッセージ
テンプレートの</ons-toolbar>以下に
コードを打ち込みましたが、
アンドロイドでは、再生させるバーが表示されますが
iosでは、バー表示されず音楽が再生できませんでした。
###該当のソースコード
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'"> <script src="components/loader.js"></script> <script src="lib/onsenui/js/onsenui.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" href="components/loader.css"> <link rel="stylesheet" href="lib/onsenui/css/onsenui.css"> <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css"> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/audioplayer.css" /> <script> ons.ready(function() { console.log("Onsen UI is ready!"); }); window.fn = {}; window.fn.open = function() { var menu = document.getElementById('menu'); menu.open(); }; window.fn.load = function(page) { var content = document.getElementById('content'); var menu = document.getElementById('menu'); content .load(page) .then(menu.close.bind(menu)); }; </script> </head>～ 一部省略 ～
<ons-template id="home.html"> <ons-page> <ons-toolbar style="background-color:#000000"> <div class="left"> <ons-toolbar-button onclick="fn.open()" > <ons-icon icon="ion-navicon, material:md-menu"></ons-icon> </ons-toolbar-button> </div> <div class="center"> <font color="#daa520">メインページ</font><br> </div> </ons-toolbar> <h1>メインページ</h1> <audio preload="auto" controls> <source src="audio.mp3" /> //オーディオファイルがあるパスで。 <source src="audio.ogg" /> <source src="audio.wav" /> </audio> <script src="js/jquery-2.1.1.min.js"></script> //jsファイルのあるパスで。 <script src="js/audioplayer.min.js"></script> <script> $( function() { $( 'audio' ).audioPlayer(); }); </script></ons-template></ons-page>
###試したこと
最小限のテンプレートには、上記のオーディオプレイヤーを埋め込むことができました。
もちろんiosでもアンドロイドでも再生することができました。
###補足情報(言語/FW/ツール等のバージョンなど)
初心者でして、monacaのテンプレートを変更するなどはしていません。
回答1件
0
ソースタグの中に、マイムタイプに指定がありません。タイプを指定してあげたください。
<audio preload="none"> <source src="audio.mp3" type="audio/mp3"> <source src="audio.ogg" type="audio/ogg"> <source src="audio.wav" type="audio/wav"> </audio>
また、onsen UIを利用すると、カスタムスクリプトが実行できないことも検証済みです。
詳しくは、Asialへということになりますが、スクリプトなしに、
<audi oncontextmenu="return false" opreload="none" controls/> <source src="audio.m4a" type="audio/aac" /> </audio>
も試していただけるといいと思います。
スライダーメニューだけではなく onsen UI , loader.js で、外部の、操作を無効にしています、鉄壁のガードです。
全ての操作を Nullにしています。
<font>タグは廃止されています。
描くには、
<p style="color: #99ffff; font-size: 14px;">a letter</p>
とスタイルの指定が必要です。
投稿2017/07/07 23:25
編集2017/07/07 23:40
総合スコア130
ご回答ありがとうございます。
当方、初心者ですので、
初歩的なご指摘も大変参考になります。
ご指摘いただいた方法でうまくいかなかったので、
Onsen UI V2 JS Splitterをあきらめることにしました。
ありがとうございました。
あなたの回答
tips
プレビュー
