質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.48%

  • JavaScript

    17076questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    6951questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • HTML5

    4193questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

スマホなどで非アクティブからアクティブになった時にアクション

受付中

回答 1

投稿

  • 評価
  • クリップ 2
  • VIEW 1,838

kouji20

score 11

webページアプリを作成しています。

window.onloadで音が鳴るようにしておりますが、スマホで一度起動した後、アプリ一覧から選択した際にもアクションを起こすにはどのようにすればよいでしょうか。
今はこんな感じで書いております。

    <script>
    window.onload = function ring()
        {
            document.getElementById("play-sound").play();
        };
    </script>

ご教示よろしくお願いします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

+2

 focus イベントハンドラ

window.onfocus はいかがでしょうか。
(addEventListenerを使うと上書きされる心配がなくなります。)
https://developer.mozilla.org/ja/docs/Web/Events/focus

※音を鳴らす動作は敬遠される場合があるのでユーザが音のOn/Offを設定出来ると良いと思います。

 audio要素の API サポート状況

iPhone で動作しないとのことですが、onfocus を確認する前にaudio要素のAPIサポート状況を確認する必要があると思います。
HTMLMediaElement#play が存在するのか。

alert('play' in document.getElementById("play-sound"));

iOS Safari で再生可能な音楽フォーマットを使っているのか。

 Page Visibility API

iOS Safari では window.onfocus が動作しないようなので Page Visibility API を併用します。

'use strict';
function handleVisibilitychange (event) {
  var doc = event.target;

  if (doc.visibilityState === 'visible') {
    alert(event.target.visibilityState);
    doc.getElementById('play-sound').play();
  }
}

function handleFocus (event) {
  alert(event.type);
  event.currentTarget.document.getElementById('play-sound').play();
}

if ('visibilityState' in document) {
  document.addEventListener('visibilitychange', handleVisibilitychange, false);
} else if ('onfocus' in this) {
  addEventListener('focus', handleFocus, false);
}


Re: kouji20 さん

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/05/09 03:26

    ありがとうございます。
    ページも参考にしてやってみたのですが、PC上では動作するもののiphoneでは発動しませんでした。もう少し色々やってみます。

    キャンセル

  • 2016/05/09 11:15

    > PC上では動作するもののiphoneでは発動しませんでした。
    それは onfocus の問題ではない可能性はないでしょうか。
    onfocus を使用せずに下記を試してみたらどうなるでしょうか(親記事を修正しました)。
    - document.getElementById("play-sound").play()
    - in 演算子で play プロパティが存在するか
    - 音楽フォーマットは iOS Safari がサポートするものを使っているのか

    キャンセル

  • 2016/05/12 01:53

    返信遅くなりすみません。

    onloadやonclickではちゃんと音がなるのですが、他のアプリから切り替えた時はやはり音が鳴らない状況です。
    あと”in 演算子で play プロパティが存在するかin 演算子で play プロパティが存在するか”はよくわからず試しておりません。
    どういったやり方かご教示お願いできますでしょうか?何度もすみません。

    キャンセル

  • 2016/05/13 07:09

    「'play' in document.getElementById('play-sound') === true ならば、playプロパティが存在するので play() を実行できる」の意です。
    iOS Safari では window.onfocus が動作しないようなので Page Visibility API を併用してみて下さい(親記事を修正しました)。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.48%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

  • 解決済

    画像を5回点滅させる

    通常の「質問する」ボタンでも同じ質問をしましたが、「GsACADEMY」でも質問させていただきます。重複していたら申し訳ございません。 ボタンをクリックしたら画像を5回点滅させた

  • 受付中

    お絵かきアプリをLocalStorage保存し、表示できるようにしたいです

    下記、ソースコードのどこに何のコードを入れればLocalStorageに保存して、 表示できるようになるでしょうか? 教えて頂けますと幸いです。 <!DOCTYPE html>

  • 受付中

    JavaScriptのlocalstorage

    下記のコードは収支を計算するコードです もとのお金を入力し、ボタンを押せばその日の収入を入力して計算し結果を表示して保存するというコードなのですが保存ができません どうすればできま

  • 受付中

    javascriptによりhtmlタグにイベントを追加する方法

    <input type="text" class="name"> に対し、ページのロード後に下記のchangeイベントを追加したいと思っています。 背景としては、WordPress

  • 解決済

    外部スクリプトの実行タイミングを操作したい

    javaは、元ソースから分かる範囲を改変して使用する程度の素人です。 問題の解決策やヒントを頂ければと思います。 解決したい事参考サイトをもとに、パララックスを導入してみたが、ス

  • 解決済

    子ウィンドウ内のgetElementByIdのtextContentが取れません。

    やりたいこと、エラー 子ウィンドウ内で親ウィンドウの値を取得し、表示させようとしているのですが、 子ウィンドウ内でdocument.getElementById().textC

  • 受付中

    javascript フォームの2重送信を防ぐ

    お世話になります。 javascriptでフォームの2重送信を防ぎたいのですが、うまくいきません。 簡易的なコードですが以下に記載いたしますので、ご指摘いただけたら幸いです

  • 解決済

    javascriptでの日付表示ができません。

    前提・実現したいこと javascriptで日付を表示させたいです。 発生している問題・エラーメッセージ ネットから見つけたコードをそのまま使わせていただいたのですが、 goo

同じタグがついた質問を見る

  • JavaScript

    17076questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    6951questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • HTML5

    4193questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。