音楽、効果音の試聴

shainy

投稿者： Material 315238 1 mini shainy 投稿日：2021/03/25 11:14

PC版Chromeブラウザ向けの拡張機能の試作です
音楽、効果音素材を公開ページで試聴することができるようになります
ただしまだ未完成なので最近の数年間に投稿された素材しか対応してません
全ての素材に対応 (2021/03/26)

以下拡張機能のインストール方法

ZIPファイルをダウンロード

ダウンロードしたZIPファイルを解凍して中にある「Soundtest-on-Rmake-main」フォルダを用意しておきます

Chromeを起動し、設定画面等から「拡張機能」をクリック、または検索バーに「chrome://extensions/」と打ち込み拡張機能画面を開きます

拡張機能のデベロッパーモードがONになっていない場合はクリックしてON（画像右上の状態）にしてください

画像左上の「パッケージ化されていない拡張機能を読み込む」をクリックするとフォルダ選択ウィンドウが出てくるので、先ほど解凍しておいた「Soundtest-on-Rmake-main」フォルダを選択して完了です

問題なければRmakeの素材ページにプレイヤーが表示され、試聴できます

2021/03/26 更新 Ver.1.2
- 自身がアップロードした音楽、効果音も素材管理画面から試聴できるように
- 音楽素材の場合は自動でループするように

コメントする

コメントするには、ログインする必要があります。

コメント一覧

光楼（114）(投稿日：2021/04/03 11:33, 履歴)

これは凄いですね……ありがとうございます！

qhqh123(投稿日：2021/03/29 12:42, 履歴)

ご対応ありがとうございます！

mochi3kan(投稿日：2021/03/28 16:38, 履歴)

入れてみましたが問題なく聞けてます、非常に助かります。
どういう原理かまったくわかりませんがすごいです！

shainy(投稿日：2021/03/28 23:27, 履歴)

ご利用ありがとうございます
問題なく使えているようで何よりです

aoihikawa(投稿日：2021/03/25 23:10, 履歴)

試作版の開発および公開
ありがとうございます

私も何度か試してみていて
https://rmake.jp/player/game/[ページID]/published_item内に
対象の素材データのアドレスがあることまでは
分かっているのですが
どうやって取り出そうかで
作業がとまっていました

shainy(投稿日：2021/03/26 02:09, 履歴)

コメントありがとうございます。

拡張機能開発中そのアドレスに接続する方法でつまずき、一部の素材限定で試作品を公開しましたが、
その問題が解決できたのですべての音声素材を試聴できるようになったバージョンが公開できそうです。

現状PC版のChromeブラウザ限定であまり実用的とは言い難いですが、僅かでも皆さんの創作の助けになれば幸いです。

aoihikawa(投稿日：2021/03/26 05:17, 履歴)

全対応版への更新、
おつかれさまです！

対応の早さ、流石です

aoihikawa(投稿日：2021/03/26 13:03, 履歴)

若干、表示場所に違和感はありますが、
自分が投稿した素材も確認できるよう
一部コードを書き換えてみました

ご確認頂けましたら、幸いです

background.js

chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
    fetch(`https://rmake.jp/player/game/${request}/published_item`).then(function (response) {
        if (response.ok) {
            return response.json();
        } else {
            fetch(`https://rmake.jp/create/materials/${request}.json`).then(function (response) {
                if (response.ok) {
                    return response.json();
                } else {
                    
                }
            }).then(function (json) {
                sendResponse(json.url);
            });
        }
    }).then(function (json) {
        if (json) {
            sendResponse(json.url);
        }
    });
    
    return true;
});

content.js (UTF-8で保存してください)

chrome.runtime.sendMessage(location.pathname.split("/").pop(), function (receive) {
    if (!receive) return;
    
    let audio = new Audio(`https://d2nlrppnj7be8d.cloudfront.net${receive}`);
    audio.controls = true;
    audio.controlsList.add("nodownload");
    
    let published_item_area = document.querySelector("div.published_item_area");
    if (published_item_area) published_item_area.appendChild(audio);
    
    let legend = document.querySelector("legend")
    if (legend) {
        if (legend.textContent.startsWith("音楽") || legend.textContent.startsWith("効果音")) {
            let h4 = document.querySelectorAll("h4");
            if (h4[1]) h4[1].appendChild(audio);
        }
    }
});

manifest.json

{
    "name": "Soundtest on Rmake",
    "description": "公開されている音楽・効果音素材を試聴できる簡易プレイヤー",
    "version": "1.2",
    "manifest_version": 3,
    "background": {
        "service_worker": "background.js"
    },
    "content_scripts": [
        {
            "matches": [
                "https://rmake.jp/published_items/*",
                "https://rmake.jp/create/materials/*"
            ],
            "js": [
                "content.js"
            ]
        }
    ]
}

shainy(投稿日：2021/03/26 16:07, 履歴)

ありがとうございます
確かに自作素材も聴ける方がいいので、対応しておきました

また、音楽素材の場合は再生時にループするように更新しました

aoihikawa(投稿日：2021/03/26 17:23, 履歴)

更新作業、おつかれさまです

細やかな配慮まで、
ありがとうございます