<div class="input_wrapper">
  <div class="input_label">動画URL</div>
  <input type="text" class="movie_url">
</div>
<div class="input_wrapper">
  <div class="input_label">日付</div>
  <input type="text" class="movie_date" placeholder="yyyy/mm/dd">
</div>
<div class="input_wrapper">
  <div class="input_label">枠種別</div>
  <input type="text" class="movie_type" placeholder="歌枠">
</div>
<div class="input_wrapper">
  <div class="input_label">タイムスタンプ</div>
  <textarea class="time_stamp" placeholder='h:mm:ss,"タイトル","アーティスト"'></textarea>
</div>
<div class="mybutton submit">生成</div>
<div class="input_wrapper">
  <div class="input_label">出力</div>
  <textarea class="output"></textarea>
</div>
<div class="mybutton text_copy">コピー</div>
.input_wrapper {
  width:100%;
  text-align:center;
}
.input_label {
  margin:0 auto;
}

input[type=text],textarea {
  width:90%;
  padding:.3em;
  border-radius:4px;
}

textarea {
  height:20em;
}

.mybutton{
  width:10em;
  text-align:center;
  margin:.2em auto 1em auto;
  padding:.2em;
  border-radius:4px;
  cursor:pointer;
}

.submit {
  color:white;
  background:crimson;  
}

.text_copy {
  color:white;
  background:darkgray;
}
jQuery(document).ready(function( $ ){
  var canTouch = 'ontouchstart' in window;
  var touchEvent = canTouch ? "touchend" : "click";
  
  // 生成ボタン
  $(document).on(touchEvent, ".submit", function () {
    movie_url = $(".movie_url").val();
    movie_date = $(".movie_date").val();
    movie_type = $(".movie_type").val();
    time_stamp = $(".time_stamp").val();
    if (movie_url == "") {
      return false;
    }
    $.ajax({
      url: "https://noembed.com/embed?url="+movie_url,
      type: "GET",
      dataType: "json",
      success: function(resp) {
        movie_title = resp['title'];
        console.log('response : ', resp);
        output = [];
        header = ['playbutton','tweetbutton','title','artist','date','type','movie_title'];
        output.push(header);
        time_stamp_lines = time_stamp.split('\n');
        $.each(time_stamp_lines,function(index, line){
          split_line = $.csv.toArrays(line);
          time = split_line[0][0];
          title = split_line[0][1];
          artist = split_line[0][2];
          split_time = time.split(':');
          if (split_time.length > 2) {
            time = split_time[0]+'h'+split_time[1]+'m'+split_time[2]+'s';
          } else {
            time = split_time[0]+'m'+split_time[1]+'s';
          }
          csvline = ['<div data-url=""'+movie_url+'"" data-time=""'+time+'"" class=""levi-list-play""></div>','<div class=""levi-list-tweet""></div>',title,artist,movie_date,movie_type,movie_title];
          output.push(csvline);
        });
        output_data = '"'+output.map(function(l){return l.join('","')}).join('"\r\n"')+'"';
        $('.output').val(output_data);
        var downloadData = new Blob([output_data], {type: "text/csv"});
        var filename ="download.csv";
        var downloadUrl  = (window.URL || window.webkitURL).createObjectURL(downloadData);
            var link = document.createElement("a");
            link.href = downloadUrl;
            link.download = filename;
            link.click();
            (window.URL || window.webkitURL).revokeObjectURL(downloadUrl);
      },
      error: function(data) {
        console.error('error occured');
      }
    })
  });

  // コピーボタン
  $(document).on(touchEvent, ".text_copy", function () {
    $(".output").select();
    document.execCommand('copy');
  });

  // ダウンロードボタン
  $(document).on(touchEvent, ".text_copy", function () {
    $(".output").select();
    document.execCommand('copy');
  });

});

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/jquery-csv/1.0.11/jquery.csv.min.js