How can I play sounds in my Framer prototype?

The simplest way to play audio in your Framer prototype is to use an Audio Player Package.

This Audio Player is a package you can download and use to play mp3 files.

Custom audio player

Note: This section uses Framer's code features. Find out how to enable code features in your project.

Because Framer supports JavaScript natively, you can use this to handle playing audio if you're looking for a more custom solution.

The best way to do this would be to include the following snippet into a code component:

var audio = new Audio("https://link-to-my-audio.com");
COPY

From here, you can use:

audio.play()
COPY

To play the specified audio.

Tip: It would be best to add the audio.play method to a handleClick function to control when the audio will play. Here’s a quick example that will let you play audio onClick:

import * as React from "react"
var audio = new Audio("https://link-to-my-audio.com");
export class AudioPlayer extends React.Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
audio.load();
audio.play();
}
render() {
return <div onClick={this.handleClick} />;
}
}
COPY