diff --git a/README.md b/README.md
index 1936395..f6a40c7 100644
--- a/README.md
+++ b/README.md
@@ -17,6 +17,7 @@ Toastify is a lightweight, vanilla JS toast notification library.
* Multiple stacked notifications
* Customizable
* No blocking of execution thread
+* Sound Support for Toast Notifications
### Customization options
@@ -124,12 +125,31 @@ Toastify({
}).showToast();
```
-Toast will be pushed 50px from right in x axis and 10px from top in y axis.
+### Add Sound
+
+This feature enhances the Toastify library by providing sound support for toast notifications. Now you can add custom sounds to your toast notifications, making them more engaging and interactive. The sound feature allows you to specify the type of sound (e.g., bell or alert) and even use your own custom sound files. With this addition, you can create a more immersive user experience and capture your users' attention with audio cues.
+
+```javascript
+Toastify({
+ text: 'I am a toast',
+ duration: 3000,
+ sound: {
+ default: true, // Use the default sound (set to false if a custom sound file is provided)
+ type: 'bell', // Specify type [bell,alert,pop]
+ src: './sounds/alert.wav', // Specify the source file for the custom sound (make sure 'default' is set to false)
+ }
+}).showToast()
+```
+To utilize the sound feature in Toastify, follow these steps:
**Note:**
-If `position` is equals to `left`, it will be pushed from left.
-If `gravity` is equals to `bottom`, it will be pushed from bottom.
+Set the sound property to an object with the following properties:
+ - `default`: Set it to `true` to use the default sound provided by Toastify. Set it to false if you want to use a custom sound file.
+ - `type`: Specify the type of sound you want to use. Available options are 'bell' and 'alert'.
+ - `src`: If `default` is set to `false`, provide the path to your custom sound file using the src property.
+
+With this new sound support feature, you can create visually and audibly appealing toast notifications, enriching your users' experience on your website or application.
## API
@@ -155,6 +175,7 @@ If `gravity` is equals to `bottom`, it will be pushed from bottom.
| style | object | Use the HTML DOM Style properties to add any style directly to toast | |
| ariaLive | string | Announce the toast to screen readers, see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions for options | "polite" |
| oldestFirst | boolean | Set the order in which toasts are stacked in page | true |
+| soundType | string | For default type use `type` | 'pop', 'alert', 'bell'
> Deprecated properties: `backgroundColor` - use `style.background` option instead
diff --git a/example/script.css b/example/script.css
index 11a46bb..1a40372 100644
--- a/example/script.css
+++ b/example/script.css
@@ -174,3 +174,9 @@ code p {
position: static;
}
}
+
+/* Disable carbon ads */
+#carbonads {
+ display: none !important;
+}
+
\ No newline at end of file
diff --git a/example/script.js b/example/script.js
index 8d290ff..03f256d 100644
--- a/example/script.js
+++ b/example/script.js
@@ -1,41 +1,41 @@
var bgColors = [
- "linear-gradient(to right, #00b09b, #96c93d)",
- "linear-gradient(to right, #ff5f6d, #ffc371)",
- ],
- i = 0;
+ "linear-gradient(to right, #00b09b, #96c93d)",
+ "linear-gradient(to right, #ff5f6d, #ffc371)",
+],
+i = 0;
Toastify({
- text: "Hi",
- duration: 4500,
- destination: "https://github.com/apvarun/toastify-js",
- newWindow: true,
- gravity: "top",
- position: 'left',
+text: "Hi",
+duration: 4500,
+destination: "https://github.com/apvarun/toastify-js",
+newWindow: true,
+gravity: "top",
+position: 'left',
}).showToast();
setTimeout(function() {
- Toastify({
- text: "Simple JavaScript Toasts",
- gravity: "top",
- position: 'center',
- style: {
- background: '#0f3443'
- }
- }).showToast();
+Toastify({
+ text: "Simple JavaScript Toasts",
+ gravity: "top",
+ position: 'center',
+ style: {
+ background: '#0f3443'
+ }
+}).showToast();
}, 1000);
// Options for the toast
var options = {
- text: "Happy toasting!",
- duration: 2500,
- callback: function() {
- console.log("Toast hidden");
- Toastify.reposition();
- },
- close: true,
- style: {
- background: "linear-gradient(to right, #00b09b, #96c93d)",
- }
+text: "Happy toasting!",
+duration: 2500,
+callback: function() {
+ console.log("Toast hidden");
+ Toastify.reposition();
+},
+close: true,
+style: {
+ background: "linear-gradient(to right, #00b09b, #96c93d)",
+}
};
// Initializing the toast
@@ -43,30 +43,48 @@ var myToast = Toastify(options);
// Toast after delay
setTimeout(function() {
- myToast.showToast();
+myToast.showToast();
}, 4500);
setTimeout(function() {
- Toastify({
- text: "Highly customizable",
- gravity: "bottom",
- position: 'left',
- close: true,
- style: {
- background: "linear-gradient(to right, #ff5f6d, #ffc371)",
- }
- }).showToast();
+Toastify({
+ text: "Highly customizable",
+ gravity: "bottom",
+ position: 'left',
+ close: true,
+ style: {
+ background: "linear-gradient(to right, #ff5f6d, #ffc371)",
+ }
+}).showToast();
}, 3000);
// Displaying toast on manual action `Try`
document.getElementById("new-toast").addEventListener("click", function() {
- Toastify({
- text: "I am a toast",
- duration: 3000,
- close: i % 3 ? true : false,
- style: {
- background: bgColors[i % 2],
- }
- }).showToast();
- i++;
+Toastify({
+ text: "I am a toast",
+ duration: 3000,
+ close: i % 3 ? true : false,
+ style: {
+ background: bgColors[i % 2],
+ }
+}).showToast();
+i++;
+});
+
+// Displaying toast on manual action `Try Sound`
+document.getElementById("new-toast-sound").addEventListener("click", function() {
+Toastify({
+ text: "I am a toast",
+ duration: 3000,
+ sound: {
+ default: true,
+ type: 'pop',
+ src: './sounds/alert.wav' // If having custom file
+ },
+ close: i % 3 ? true : false,
+ style: {
+ background: bgColors[i % 2],
+ }
+}).showToast();
+i++;
});
diff --git a/index.html b/index.html
index 49174ee..cc074ee 100644
--- a/index.html
+++ b/index.html
@@ -6,11 +6,14 @@
Toastify JS - Pure JavaScript Toast Notificaton Library
-
+
+
+
@@ -21,29 +24,42 @@