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

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

ただいまの
回答率

90.40%

  • JavaScript

    21451questions

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

  • HTML

    12182questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

JS、HTMLを用いた音声再生プログラムの関数指定

受付中

回答 0

投稿

  • 評価
  • クリップ 0
  • VIEW 226
退会済みユーザー

退会済みユーザー

単語帳アプリをJSとHTMLで実装しています。
その中でボタンを押すと音声ファイルを再生するプログラムにplay()関数を使おうと思ったのですが使い方がわかりません。
指定していなくても使えるとネットでは書いていたのですがエラーメッセージが出ていました。
Uncaught ReferenceError: play is not defined
どうすれば該当音声URLまたはFileを再生できるでしょうか。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>Flash Cards</title>
  <style>
      body {
    margin: 0;
    background: #e0e0e0;
    text-align: center;
    font-family: Verdana, sans-serif;
    color: #fff;
  }
  #btn {
    width: 200px;
    margin: 0 auto;
    padding: 7px;
    border-radius: 5px;
    background: #00aaff;
    box-shadow: 0 4px 0 #0088cc;
    cursor: pointer;
  }
  #btn:hover {
    opacity: 0.8;
  }
  #voice {
    margin: 30px auto 20px;
    width: 50px;
    height: 25px
    padding: 7px;
    font-size: 15px;
    line-height: 25px;
    border-radius: 5px;
    background: #00aaff;
    cursor: pointer;
  }
  #voice:hover {
    opacity: 0.8;
  }
  #card {
    margin: 60px auto 20px;
    width: 550px;
    height: 100px;
    cursor: pointer;
    font-size: 38px;
    line-height: 100px;
    perspective: 100px;
    transform-style: preserve-3d;
    transition: transform .8s; 
  }
   #card-front, #card-back {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    position: absolute;
    backface-visibility: hidden;
  }
  #card-front {
    background: #fff;
    color: #333;
  }
  #card-back {
    background: #00aaff;
    transform: rotateY(180deg);
  }
  #card-voice {
    background: #00aaff;
    transform: rotateY(180deg);
  }
  .open{
      transform: rotateY(180deg);
  }

  </style>
</head>
<body>
  <div id="card">
      <div id="card-front"></div>
      <div id="card-back"></div>
  </div>
  <div id="voice" onclick="play()">voice</div>
  <div id="btn">NEXT</div>
  <script>
  (function(){
      'use strict';

      var words = [
      {'en': 'all show and no go', 'ja': '見てくれだけの役立たず','voice':'http://www.dotup.org/uploda/www.dotup.org1239946.m4a.html' },
      {'en': 'authenticity', 'ja': '信頼性','voice':'http://www.dotup.org/uploda/www.dotup.org1239947.m4a.html' },
      {'en': 'be in seventh heaven', 'ja': '有頂天である','voice':'http://www.dotup.org/uploda/www.dotup.org1239949.m4a.html' },
      {'en': 'gateway to success', 'ja': '登竜門','voice':'http://www.dotup.org/uploda/www.dotup.org1239952.m4a.html' },
      {'en': 'hen-pecked husband', 'ja': '奥さんに頭が上がらないダンナ','voice':'http://www.dotup.org/uploda/www.dotup.org1239953.m4a.html' },
      {'en': 'I will eat my hat if 〜', 'ja': '〜のことは絶対にない','voice':'http://www.dotup.org/uploda/www.dotup.org1239954.m4a.html' },
      {'en': 'I will game!', 'ja': '私、行きます','voice':'http://www.dotup.org/uploda/www.dotup.org1239957.m4a.html' }
    ];

      var card =document.getElementById('card');
      var cardFront =document.getElementById('card-front');
      var cardBack =document.getElementById('card-back');
    var cardVoice =document.getElementById('card-voice');
      var btn =document.getElementById('btn');
    var voice =document.getElementById('voice');
      card.addEventListener('click',function(){
          flip();
      });
      btn.addEventListener('click', function(){
          next();
      });





      function next(){
          if(card.className === 'open'){
              card.addEventListener('transitionend',setCard);
              flip();
          }else{
              setCard();
          }
      }

      function setCard(){
          var num = Math.floor(Math.random() * words.length);
          cardFront.innerHTML = words[num]['en'];
      cardBack.innerHTML = words[num]['ja'];
      voice = new Audio(words[num]['voice']);
          card.removeEventListener('transitionend',setCard);
      }
    setCard();


      function flip(){
          card.className = card.className === '' ? 'open' : '';
      }


  })();
  </script>
</body>
</html>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正の依頼

  • kei344

    2017/05/06 15:10

    「ネットでは書いていた」は記事のURLを質問文に追記ください。(URLにはリンクを張ることができます)

    キャンセル

  • Lhankor_Mhy

    2017/05/06 16:14

    コード以前にその音声ファイルのURL開いてみた方がいいと思いますよ。

    キャンセル

まだ回答がついていません

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

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

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

  • JavaScript

    21451questions

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

  • HTML

    12182questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。