96 lines
2.6 KiB
Vue
96 lines
2.6 KiB
Vue
<template>
|
|
<div class="audio">
|
|
<vue-plyr class="form-control col-md-6" :options="options">
|
|
<audio controls crossorigin playsinline>
|
|
<source :src="srcAudio" type="audio/mp3" />
|
|
<!-- <source src="/path/to/audio.ogg" type="audio/ogg" /> -->
|
|
</audio>
|
|
</vue-plyr>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapState, mapActions } from "pinia";
|
|
import { useEntityStore } from "@search/stores/entityStore";
|
|
|
|
|
|
export default {
|
|
mounted() {
|
|
this.entity = this.selectedItemEntityGetter;
|
|
if (this.entity.sound_links.length)
|
|
this.srcAudio =
|
|
import.meta.env.VITE_MEDIA_BASE_URL +
|
|
"media2" +
|
|
this.entity.sound_links[0].link;
|
|
else this.srcAudio = "";
|
|
|
|
this.mehditest();
|
|
},
|
|
watch: {
|
|
// #region mehdi entityList
|
|
// #endregion
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
entity: {},
|
|
options: {
|
|
controls: [
|
|
// "play-large", // The large play button in the center
|
|
//'restart', // Restart playback
|
|
// "rewind", // Rewind by the seek time (default 10 seconds)
|
|
"play", // Play/pause playback
|
|
// "fast-forward", // Fast forward by the seek time (default 10 seconds)
|
|
"progress", // The progress bar and scrubber for playback and buffering
|
|
"current-time", // The current time of playback
|
|
// "duration", // The full duration of the media
|
|
"mute", // Toggle mute
|
|
"volume", // Volume control
|
|
// "captions", // Toggle captions
|
|
"settings", // Settings menu
|
|
// "pip", // Picture-in-picture (currently Safari only)
|
|
// "airplay", // Airplay (currently Safari only)
|
|
"download", // Show a download button with a link to either the current source or a custom URL you specify in your options
|
|
// "fullscreen", // Toggle fullscreen
|
|
],
|
|
speed: { selected: 1, options: [0.75, 1, 1.5, 2] },
|
|
},
|
|
// #region mehdi all
|
|
srcAudio: `https://dl.navaapp.com/api/647319fdd1c72653fb0f6960.mp3`,
|
|
// #endregion
|
|
};
|
|
},
|
|
computed: {
|
|
...mapState(useEntityStore, [
|
|
"selectedItemEntityGetter",
|
|
"listEntityGetter",
|
|
"fontSizeGerrer",
|
|
]),
|
|
},
|
|
methods: {
|
|
...mapActions(useEntityStore, [
|
|
"SET_ITEM_ENTITY",
|
|
"SET_LIST_ENTITY",
|
|
"SET_FONT",
|
|
]),
|
|
// #region mehdi all
|
|
mehditest() {},
|
|
|
|
// #endregion
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
// #region all
|
|
|
|
// #endregion
|
|
|
|
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
|
|
}
|
|
@media only screen and (min-width: 576px) and (max-width: 766.98px) {
|
|
}
|
|
@media (max-width: 575.98px) {
|
|
}
|
|
</style>
|