音声連続自動再生ツールの設定・設置

音声連続自動再生ツール

更新日: 2018年9月30日

Webサイトにある複数の音声データを連続自動再生させます。再生中は、タイトル、ジャンルなどのデータを表示するほか、音声ファイルをダウンロード、次の音声データへの移動もできます。設定ファイル=プレイリストを設定することにより、カスタマイズできます。

音声連続自動再生ツールのサンプルを見る

フォルダとファイルの構成

連続自動再生は、以下のようなフォルダとファイル構成になっています。

ap-audio フォルダ
  |-ap-audio.js (音声データを制御するプログラムファイル)
  |-ap-audio.css (デザインファイル)
  |-setting (設定ファイル)
  |-.htaccess (ダウンロード設定ファイル)
  |-・・・.mp3 (音声ファイル)
  |-

このうち、カスタマイズが必要なのは、音声ファイルと設定ファイルです。

音声ファイルの作り方

  • ファイル名は半角英数字にします。
  • 音声のファイル形式は mp3 にします。
  • ファイルの本数には制限がありません。
  • できた音声ファイルは ap-audio フォルダに移動します。

設定ファイルの作り方

弊社会員サイトで、連続自動再生(音声)の設定ファイルを生成して、ダウンロードします。設定項目は以下の通りです。

  1. ファイル名
  2. タイトル
  3. ジャンル
  4. イメージ
  5. 使用楽器
  6. 演奏時間
  7. コメント
  8. 著作権表示

1~7までの組み合わせをいくつでも指定できます。
入力文字数が長すぎると、文字が途切れます。
なお、1~7までの設定項目を減らしたり、他の項目に差し替えたい場合はご相談ください。
設定ファイルができたら、ap-audio フォルダに入れます。

音声連続自動再生 プレイリストの生成とダウンロード

連続自動再生(音声)を実装するページの設定

連続自動再生(音声)を実装するページが HTML の場合、ソースファイルを開きます。
Wordpressなら、連続自動再生(音声)を実装する投稿ページまたは固定ページを開き、テキストモードにします。

音声のタイトルを一つずつ playlistクラス で囲み、順番に idで audio1、audio2、・・・とナンバリングしていきます。

<div class="playlist" id="audio1">音声A</div>

音声連続自動再生ツールの設置

以下、通常のhtmlファイルに設置する場合と、Wordpressに設置する場合に分けて、設置のしかたを説明します。

通常のhtmlファイルに設置する場合

  1. 作業をする前に、音声を試聴させたい html のバックアップを取っておきます。
  2. ap-audioフォルダを、音声を試聴させたい htmlページと同じ階層にアップロードします。
    |-
    |-html (音声ページ)
    |-ap-audio フォルダ
       |-ap-audio.js 
       |-ap-audio.css
       |-setting 
       |-.htaccess
       |-・・・.mp3
       |-
    
  3. 音声を試聴させたい html の </head> の直前に、cssファイル、jquery.js、jsファイルへのリンクを書きます。

例)

<link href="ap-audio/ap-audio.css" type="text/css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/
jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
<script src="ap-audio/ap-audio.js" type="text/javascript"></script>
</head>
  1. テストして意図通りになっていればOKです。
  2. 意図通りになっていない場合は、設定ファイルを作り直し、上書きしてテストします。

なお、スタンドアローンではテストできません。

wordpressに設置する場合

  1. 作業をする前に、必ず functions.php のバックアップを取っておきます。
  2. ap-audioフォルダを、themesフォルダ中の現在のテーマフォルダにアップロードします。
    themes フォルダ
      |-
      |-current-theme (現在のテーマフォルダ)
          |-
          |-functions.php
          |-ap-audio フォルダ
             |-ap-audio.css
             |-ap-audio.js
             |-setting
             |-.htaccess 
             |-・・・.mp3 
    
  3. 音声連続自動再生ツールを実装するために、テーマフォルダ内の functions.php にcssファイルとjsファイルへのリンクとsearchフォルダへのパス(audioPath)を書きます。
    以下は、xxxというスラッグのページから呼び出す場合の書き方です。

例)

function cb_enqueue() {
  if (is_single ('xxx')) {
    echo '<script type="text/javascript">var audioPath 
="'.get_template_directory_uri()."/ap-audio/".'";</script>';
    wp_enqueue_script ('ap-a_script', 
get_template_directory_uri()."/ap-audio/ap-audio.js", 
array('jquery'), false, true);
    wp_enqueue_style ('ap-a_style', 
get_template_directory_uri()."/ap-audio/ap-audio.css");
  }
}
add_action ('wp_enqueue_scripts', 'cb_enqueue');
  1. テストして意図通りになっていればOKです。
  2. 意図通りになっていない場合は、設定ファイルを作り直し、上書きしてテストします。

CMSサイトへの設置は、サイト管理者に依頼するようにしましょう。

▲このページのトップへ