音声ファイルをダウンロードして聞くのめんどくさい

kintoneの音声ファイルを一覧から再生したいなと思って書いたソースです。

下図を御覧ください。

[デモ]フィールドに音楽ファイルを添付しています。

これだと、いちいちダウンロードしてから聞かないといけないのですが、
「めんどくさいな」ってつぶやいちゃいそうですよね。

そこで私は考えた。

音楽ファイルはaudioタグでプレイヤー化してしまえばいいのではないか？

<audio src="XXXXXX.mp3" controls>ファイル名</audio>

こうだったらいいのではないか！？

JavaScriptを書いた

というわけで、私がよく使う拡張子のmp3とm4aとwavだけは音楽プレイヤーにしようと思って書いたのがこれです。
ゴリ押しな感じだけど、要は、拡張子がmp3かm4aかwavだったら、<a>タグの下に<audio>タグも追加してねっていうソースです。

いきなり出てきているrecordlist-file-others-gaiaですが、htmlを見た感じ、添付ファイルがある親の層にこのrecordlist-file-others-gaiaクラスのタグがあるみたいです。

html上の添付ファイルを探すためにこのクラスを使っている感じです。
なので・・・、kintoneの仕様変更などでクラス名が変わったりすると使えなくなります。

    kintone.events.on([
        'app.record.index.show'
    ], function(event) {

        $('.recordlist-file-others-gaia').each(function() {
            let href = $(this).find("a").attr('href');
            let hrefarry = href.split(".");
            let extention = hrefarry[hrefarry.length-1];
            if(extention==="mp3"|| extention==="m4a" || extention==="wav"){
                $(this).parent().append(`<li><audio src="${href}" controls><p>音声を再生するには、audioタグをサポートしたブラウザが必要です。</p></audio></li> `);
            }
        });

        return event;
    }); 

https://js.cybozu.com/jquery/3.4.1/jquery.min.js
と、
上のソースを、
設定の「JavaScript / CSSでカスタマイズ」でセットしたら

↓のようになるはず！

やったね！

プラグイン化

プラグインってどうやるのか分からなかったのですが、
これを機会に勉強しておこうと思って、ついでにプラグイン化してみました。

このまま、.mp3か.wavか.m4aしかプレイヤーにならない状態ですし、
kintoneの仕様変更などあればいつ使えなくなるかわからないし、
全く動きの保証をするつもりもなくて申し訳ないとしか言えないプラグインですが、
それでもよかったら使ってみてくださいネ。

↓ここのplugin.zip
https://github.com/juriotama/kintone_audioplayer

読んでくださり、ありがとうございました！