{"id":26009995,"url":"https://github.com/byu-oit/playaudiohtml","last_synced_at":"2025-07-20T08:34:22.615Z","repository":{"id":168394080,"uuid":"615605967","full_name":"byu-oit/PlayAudioHTML","owner":"byu-oit","description":"Mendix widget to play audio in browser","archived":false,"fork":false,"pushed_at":"2023-08-21T19:32:38.000Z","size":4447,"stargazers_count":0,"open_issues_count":6,"forks_count":0,"subscribers_count":9,"default_branch":"main","last_synced_at":"2025-03-05T22:32:13.328Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/byu-oit.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-03-18T06:05:04.000Z","updated_at":"2023-06-20T20:49:10.000Z","dependencies_parsed_at":"2025-03-05T22:30:01.809Z","dependency_job_id":"cb8311f9-de67-454a-b91b-19a09c8c2e10","html_url":"https://github.com/byu-oit/PlayAudioHTML","commit_stats":null,"previous_names":["laurenra7/playaudiohtml","byu-oit/playaudiohtml"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/byu-oit/PlayAudioHTML","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/byu-oit%2FPlayAudioHTML","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/byu-oit%2FPlayAudioHTML/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/byu-oit%2FPlayAudioHTML/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/byu-oit%2FPlayAudioHTML/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/byu-oit","download_url":"https://codeload.github.com/byu-oit/PlayAudioHTML/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/byu-oit%2FPlayAudioHTML/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266092819,"owners_count":23875544,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-03-05T22:26:48.301Z","updated_at":"2025-07-20T08:34:22.596Z","avatar_url":"https://github.com/byu-oit.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## PlayAudioHTML\nA Mendix widget that plays common audio files in a browser stored in an \nobject (entity) that is a specialization of [System.FileDocument](https://docs.mendix.com/howto8/data-models/working-with-images-and-files/). \nIt displays controls for play, pause, volume, etc.\n\nDifferent browsers play different media types. WAV, MP3, and MP4 containers \nare widely supported (PCM, MP3, and AAC formats, respectively). Other \ncontainers like ADTS, Ogg, WebM, and FLAC may be supported (AAC, Vorbis, \nOpus, and FLAC formats). See [HTML5 Audio - Supported audio coding formats](https://en.wikipedia.org/wiki/HTML5_audio#Supported_audio_coding_formats) \nfor browser support.\n\n## Features\nThis uses the [HTML5 \n\\\u003caudio\u003e](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio) \nelement and displays time elapsed / total time and a moving playhead with \ncontrols for play/pause, etc.\n\n#### Ready to play audio file\n\n![PlayAudio.png](readme-images/PlayAudio.png)\n\n#### Audio file is playing\n\n![PauseAudio.png](readme-images/PauseAudio.png)\n\n#### Adjust volume while audio file is playing\n\n![VolumAudio.png](readme-images/VolumeAudio.png)\n\n## How to Use in a Studio Pro Project\n\n![ConfigurePlayAudioWidget.png](readme-images/ConfigurePlayAudioWidget.png)\n\n1. Add a Data View or List View of a specialization of the System.FileDocument \nentity to a page.\n2. In the Data View, add a Play Audio HTML widget.\n3. In the Play Audio HTML widget properties under Data source, set Entity \nto the entity that is a specialization of System.FileDocument that has the \naudio data. This retrieves a list of objects.\n4. Use an [XPath constraint](https://docs.mendix.com/refguide/xpath-keywords-and-system-variables/) \nlike [id=$currentObject] to limit the list to just the currentObject. This \nis a workaround because the Mendix client API in version 9 for a [datasource](https://docs.mendix.com/apidocs-mxsdk/apidocs/pluggable-widgets-property-types-9/#datasource) \nreturns a [ListValue](https://docs.mendix.com/apidocs-mxsdk/apidocs/pluggable-widgets-client-apis-list-values/#listvalue) \nwhich is a list of ObjectItem (not [MxObject](https://apidocs.rnd.mendix.com/9/client/mendix_lib_MxObject.html) \nwhich would be convenient). The ObjectItem.id is the guid of the object.\n\nSee descriptions of how to use ObjectItem with examples here:\n\n[Client APIs for Pluggable Widgets, section 4.4 ModifiableValue](https://docs.mendix.com/apidocs-mxsdk/apidocs/pluggable-widgets-client-apis/#modifiable-value)\n\n[Client APIs for Pluggable Widgets, section 3.1 ListActionValue](https://docs.mendix.com/apidocs-mxsdk/apidocs/pluggable-widgets-client-apis-list-values/#listactionvalue)\n\n[Client APIs for Pluggable Widgets, section 3.4 ListWidgetValue](https://docs.mendix.com/apidocs-mxsdk/apidocs/pluggable-widgets-client-apis-list-values/#listwidgetvalue)\n\nThe widget will display on the page and allow you to play the audio file, \nunless it returns more than one object because it hasn't been constrained \nwith XPath to just the currentObject.\n\n## How to Build\n\n1. Clone this code.\n2. Run `npm install` in the root project directory to install dependencies \n(to the `node_modules` directory which gets created).\n3. (_optional_) To automatically copy the compiled widget .mpk file to the \nwidgets directory in a Mendix project, modify the `projectPath` under \n`config` in package.json with the root directory of the Mendix project; \nfor example: `\"projectPath\": \"C:\\\\Users\\\\MyUser\\\\Documents\\\\Mendix\\\\HTML Audio-test-app\"`.\n4. Run `npm run build` to compile the code and create the widget .mpk \nfile under the `dist` directory (and copy it to the Mendix project's \n`widgets` directory if `projectPath` was set).\n\n## Development and contribution\n\n1. Install NPM package dependencies by using: `npm install`. If you use NPM v7.x.x, which can be checked by executing `npm -v`, execute: `npm install --legacy-peer-deps`.\n1. Run `npm start` to watch for code changes. On every change:\n    - the widget will be bundled;\n    - the bundle will be included in a `dist` folder in the root directory of the project;\n    - the bundle will be included in the `deployment` and `widgets` folder of the Mendix test project.\n\n[specify contribution]\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbyu-oit%2Fplayaudiohtml","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbyu-oit%2Fplayaudiohtml","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbyu-oit%2Fplayaudiohtml/lists"}