{
  "id": 308422,
  "title": "Play sound with line advancing over waveform?",
  "url": "/competitions/birdclef-2022/discussion/308422",
  "author_name": "",
  "post_date": "2022-02-18T15:02:28.174086Z",
  "votes": 4,
  "comment_count": 6,
  "views": 0,
  "content": "<p>Hello community,<br>\nI was able to 1) play the audio files and 2) plot the waveform while doing my EDA. </p>\n<p>I would really love to do that all together. So, in the ideal world, I would press the \"Play\" button and, while I'm hearing the sounds, a vertical bar moves through the waveform plot allowing me to \"see\" what I am hearing. </p>\n<p>An even more ideal situation would be to have a Spectrogram, or, even better: a library that allows me to work with these concepts as building blocks and create my own subplots + audio gadgets easily.</p>\n<p>Does this ring a bell to anyone? Any lead / clue of where to look at? I'm just starting with audio.</p>",
  "messages": [
    {
      "id": "1696059",
      "postDate": "02/18/2022 15:02:28",
      "content": "<p>Hello community,<br>\nI was able to 1) play the audio files and 2) plot the waveform while doing my EDA. </p>\n<p>I would really love to do that all together. So, in the ideal world, I would press the \"Play\" button and, while I'm hearing the sounds, a vertical bar moves through the waveform plot allowing me to \"see\" what I am hearing. </p>\n<p>An even more ideal situation would be to have a Spectrogram, or, even better: a library that allows me to work with these concepts as building blocks and create my own subplots + audio gadgets easily.</p>\n<p>Does this ring a bell to anyone? Any lead / clue of where to look at? I'm just starting with audio.</p>",
      "rawMarkdown": "Hello community,\nI was able to 1) play the audio files and 2) plot the waveform while doing my EDA. \n\nI would really love to do that all together. So, in the ideal world, I would press the \"Play\" button and, while I'm hearing the sounds, a vertical bar moves through the waveform plot allowing me to \"see\" what I am hearing. \n\nAn even more ideal situation would be to have a Spectrogram, or, even better: a library that allows me to work with these concepts as building blocks and create my own subplots + audio gadgets easily.\n\nDoes this ring a bell to anyone? Any lead / clue of where to look at? I'm just starting with audio.",
      "votes": null
    },
    {
      "id": "1699985",
      "postDate": "02/21/2022 15:24:45",
      "content": "<p>I put together a pretty quick and dirty web app to do just that :)</p>\n<p>It's not too bad if you have some html/js knowledge: use the Audio html tag with some js to get or set the current time: <a href=\"https://www.w3schools.com/tags/ref_av_dom.asp\" target=\"_blank\">https://www.w3schools.com/tags/ref_av_dom.asp</a> then position absolute a 1px wide div on top at the current time.</p>",
      "rawMarkdown": "I put together a pretty quick and dirty web app to do just that :)\n\nIt's not too bad if you have some html/js knowledge: use the Audio html tag with some js to get or set the current time: https://www.w3schools.com/tags/ref_av_dom.asp then position absolute a 1px wide div on top at the current time.",
      "votes": null
    },
    {
      "id": "1701677",
      "postDate": "02/23/2022 01:12:13",
      "content": "<p>Yeah,… it is definitely feasible. But I'm very rusty with HTML. I would rather use something out-of-the-box. It bugs me that I cannot find anything for this kind of visualization.</p>",
      "rawMarkdown": "Yeah,... it is definitely feasible. But I'm very rusty with HTML. I would rather use something out-of-the-box. It bugs me that I cannot find anything for this kind of visualization.",
      "votes": null
    },
    {
      "id": "1703747",
      "postDate": "02/24/2022 20:02:31",
      "content": "<p>I spent an entire day trying to figure this out. I swear I did it previously. <br>\nThat being said I came up with nothing. It drives me mad.</p>",
      "rawMarkdown": "I spent an entire day trying to figure this out. I swear I did it previously. \nThat being said I came up with nothing. It drives me mad.",
      "votes": null
    },
    {
      "id": "1707079",
      "postDate": "02/28/2022 05:40:43",
      "content": "<p>If you happen to come up with some resource in this direction, remember to ping me please!</p>",
      "rawMarkdown": "If you happen to come up with some resource in this direction, remember to ping me please!",
      "votes": null
    },
    {
      "id": "1710011",
      "postDate": "03/02/2022 17:28:20",
      "content": "<p>I got this to work in Colab but the line won't show in Kaggle. Here's the article I used as reference.</p>\n<ul>\n<li><a href=\"https://www.scottcondron.com/jupyter/visualisation/audio/2020/10/21/interactive-audio-plots-in-jupyter-notebook.html\" target=\"_blank\">https://www.scottcondron.com/jupyter/visualisation/audio/2020/10/21/interactive-audio-plots-in-jupyter-notebook.html</a></li>\n</ul>",
      "rawMarkdown": "I got this to work in Colab but the line won't show in Kaggle. Here's the article I used as reference.\n- https://www.scottcondron.com/jupyter/visualisation/audio/2020/10/21/interactive-audio-plots-in-jupyter-notebook.html",
      "votes": null
    },
    {
      "id": "1713299",
      "postDate": "03/05/2022 21:05:16",
      "content": "<p>Thanks for the resource Darien!</p>",
      "rawMarkdown": "Thanks for the resource Darien!",
      "votes": null
    }
  ],
  "comments": [
    {
      "id": 1699985,
      "author_name": "chris62",
      "author_url": "",
      "post_date": "02/21/2022 15:24:45",
      "content": "<p>I put together a pretty quick and dirty web app to do just that :)</p>\n<p>It's not too bad if you have some html/js knowledge: use the Audio html tag with some js to get or set the current time: <a href=\"https://www.w3schools.com/tags/ref_av_dom.asp\" target=\"_blank\">https://www.w3schools.com/tags/ref_av_dom.asp</a> then position absolute a 1px wide div on top at the current time.</p>",
      "votes": null,
      "replies": [
        {
          "id": 1701677,
          "author_name": "julian3833",
          "author_url": "",
          "post_date": "02/23/2022 01:12:13",
          "content": "<p>Yeah,… it is definitely feasible. But I'm very rusty with HTML. I would rather use something out-of-the-box. It bugs me that I cannot find anything for this kind of visualization.</p>",
          "votes": null,
          "replies": []
        }
      ]
    },
    {
      "id": 1703747,
      "author_name": "dschettler8845",
      "author_url": "",
      "post_date": "02/24/2022 20:02:31",
      "content": "<p>I spent an entire day trying to figure this out. I swear I did it previously. <br>\nThat being said I came up with nothing. It drives me mad.</p>",
      "votes": null,
      "replies": [
        {
          "id": 1707079,
          "author_name": "julian3833",
          "author_url": "",
          "post_date": "02/28/2022 05:40:43",
          "content": "<p>If you happen to come up with some resource in this direction, remember to ping me please!</p>",
          "votes": null,
          "replies": []
        }
      ]
    },
    {
      "id": 1710011,
      "author_name": "dschettler8845",
      "author_url": "",
      "post_date": "03/02/2022 17:28:20",
      "content": "<p>I got this to work in Colab but the line won't show in Kaggle. Here's the article I used as reference.</p>\n<ul>\n<li><a href=\"https://www.scottcondron.com/jupyter/visualisation/audio/2020/10/21/interactive-audio-plots-in-jupyter-notebook.html\" target=\"_blank\">https://www.scottcondron.com/jupyter/visualisation/audio/2020/10/21/interactive-audio-plots-in-jupyter-notebook.html</a></li>\n</ul>",
      "votes": null,
      "replies": [
        {
          "id": 1713299,
          "author_name": "julian3833",
          "author_url": "",
          "post_date": "03/05/2022 21:05:16",
          "content": "<p>Thanks for the resource Darien!</p>",
          "votes": null,
          "replies": []
        }
      ]
    }
  ],
  "raw_markdown_by_id": {
    "1696059": "Hello community,\nI was able to 1) play the audio files and 2) plot the waveform while doing my EDA. \n\nI would really love to do that all together. So, in the ideal world, I would press the \"Play\" button and, while I'm hearing the sounds, a vertical bar moves through the waveform plot allowing me to \"see\" what I am hearing. \n\nAn even more ideal situation would be to have a Spectrogram, or, even better: a library that allows me to work with these concepts as building blocks and create my own subplots + audio gadgets easily.\n\nDoes this ring a bell to anyone? Any lead / clue of where to look at? I'm just starting with audio.",
    "1699985": "I put together a pretty quick and dirty web app to do just that :)\n\nIt's not too bad if you have some html/js knowledge: use the Audio html tag with some js to get or set the current time: https://www.w3schools.com/tags/ref_av_dom.asp then position absolute a 1px wide div on top at the current time.",
    "1701677": "Yeah,... it is definitely feasible. But I'm very rusty with HTML. I would rather use something out-of-the-box. It bugs me that I cannot find anything for this kind of visualization.",
    "1703747": "I spent an entire day trying to figure this out. I swear I did it previously. \nThat being said I came up with nothing. It drives me mad.",
    "1707079": "If you happen to come up with some resource in this direction, remember to ping me please!",
    "1710011": "I got this to work in Colab but the line won't show in Kaggle. Here's the article I used as reference.\n- https://www.scottcondron.com/jupyter/visualisation/audio/2020/10/21/interactive-audio-plots-in-jupyter-notebook.html",
    "1713299": "Thanks for the resource Darien!"
  },
  "source": "meta"
}