Feature Request: Looping

I desired this feature to be included, but couldn't wait for an update. So, I took matters into my own hands and successfully added a loop facility to the audio player with the help of artificial intelligence. I am sharing this as a public service.

1. Add a Data Property for Looping

In the Vue component named "App" defined in the App.vue file, you'll need to add a new data property to keep track of the looping state. You can name it isLooping, and it should be a boolean value.

data() {
  return {
    // ... other data properties
    isLooping: false,
  };
}

2. Add a Method to Toggle Looping

Create a new method to toggle the looping state. This method will be called when the user clicks a button to enable or disable looping. To ensure clarity on whether the loop is active, I also wanted to change the color of the loop button when it is enabled. To change the color of the button, you can add a class to it based on the isLooping property. For example, you can add a class like looping when isLooping is true, and remove the class when isLooping is false.

methods: {
  // ... other methods
  toggleLooping() {
    this.isLooping = !this.isLooping;
    this.audio.loop = this.isLooping;

    // Get a reference to the button element
    const button = this.$refs.loopButton;

    // Add or remove the 'looping' class based on the isLooping property
    if (this.isLooping) {
      button.classList.add('looping');
    } else {
      button.classList.remove('looping');
    }
  },

3. Update the HTML Structure

You'll need to add a button to the render function that generates the HTML structure of the audio player UI. This button will allow the user to enable or disable looping.

To add a button to the render function that generates the HTML structure of the audio player UI, you can modify the render function in the following way:

Add a new element for the button within the render function.
Define an onClick event handler for the button, which will trigger the enable/disable looping functionality.
Add a ref attribute to the button element and set it to "loopButton".
Update the render function to include the button element.

Here's an example of how the modified render function may look:

function render2(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_AudioCommentVue = resolveComponent("AudioCommentVue");
  return openBlock(), createElementBlock("div", _hoisted_12, [
    createBaseVNode("div", _hoisted_22, [
      withDirectives(createBaseVNode("div", _hoisted_3, [
        createBaseVNode("div", { class: "playpause", onClick: _cache[0] || (_cache[0] = (...args) => _ctx.togglePlay && _ctx.togglePlay(...args)), ref: "playpause" }, null, 512),
        createBaseVNode("div", { class: "playpause seconds", onClick: _cache[1] || (_cache[1] = ($event) => _ctx.setPlayheadSecs(_ctx.currentTime + 5)), ref: "add5" }, " +5s ", 512),
        createBaseVNode("div", { class: "playpause seconds", onClick: _cache[2] || (_cache[2] = ($event) => _ctx.setPlayheadSecs(_ctx.currentTime - 5)), ref: "min5" }, " -5s ", 512),
        // Add your button element here
        createBaseVNode("button", { ref: "loopButton", onClick: _cache[11] || (_cache[11] = ($event) => _ctx.toggleLooping()) }, "Toggle Looping")
      ], 512), [ [vShow, !_ctx.smallSize] ]),
      // Rest of the code...
    ])
  ]);
}

In this example, a button element with the text "Toggle Looping" is added to the audio player UI. The onClick event is bound to the toggleLooping method, which you will need to define in the methods section of the component. The toggleLooping method should handle enabling or disabling looping based on the current state.

You can then define the styles for the looping class in your CSS to change the color of the button. For example:

button.looping {
  background-color: #3c6186 !important; /* Or any color you want */
}

When you make these changes, the loop feature will be added to your audio player.

noonesimg / obsidian-audio-player